menu jak w smashingmagazine

[dav234]

Witam

przechadzajac sie po kilku stronach, zauwazylem cos ciekawego, cos czego nie potrafie sobie wyobrazic jak to zostalo zrobione, jakim sposobem czy techniką a mianowice menu w https://www.smashingmagazine.com, tam sa ogolnie dwa menu, u gory jedno a drugie po lewej, takie kategorie, bardzo bym kogos prosil o wytlumaczenie jak to zostalo zrobione, ze te dwa elementy <nav> sa w innych blokach a po zmniejszeniu strony do rozmiaru telefonu, naciskajac klawisz "menu" ukazuja sie jedno pod drugim, jak oni to zrobili?

jedyne co mi przychodzi na mysl ale to i tak jest zle, to jest to, ze w jednym z tych <nav> jest wlasnie zrobiony ten drugi <nav>(czyli sa polaczone) ale w media queries jest, ze jak sie da np max-width 500px to wlasnie to drugie menu ma wlaczone dispaly:block i jest wyswietlane jedno po drugim, a jak jest dajmy max-width: 800px czyli ta sytuacja kiedy znika ten przycisk "menu" to jest znowu wylaczone z display:none

to teraz mi sie akurat drugie pytanie nasunelo, jak to jest zrobione ze przy dajmy 1000px na tej stronie jest po lewej ten blok z tymi kategoriami, a po prawej znowu jest nastepny blok z jakimis reklamami i teraz po zmniejszeniu okna przegladarki do 750px te 2 bloki znikaja, jaka jest tutaj uzywana technika? tez display:none?

[GhostZoombie]

Może to Ci pomoże 

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

resztę masz tu: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries