Der Bereich CSS: Menü definiert ein einfaches Navigationsmenü für die Anzeige auf dem Desktop-PC. Es wird über eine UL-Liste erstellt und enthält einige Angaben zur Formatierung des Menüs.

Spannend wird es im Bereich CSS: Media Queries.

Zunächst wird festgelegt, dass das Hamburger-Icon des mobilen Menüs nicht angezeigt werden soll, wenn die Bildschirmbreite mehr als 960 Pixel beträgt (@media screen and (min-width: 961px) {…} ).
Danach wird dem Browser mitgeteilt, wie das Menü gestaltet werden soll, wenn die Breite des Browserfensters kleiner oder gleich 960 Pixel ist (@media screen and (max-width: 960px) {…} ).

nav ul {…}
Das Menü wird zunächst verborgen, indem es um 100% nach links versetzt wird. Zusätzlich definieren wir eine transition, um über CSS3 auch ohne JavaScript einen Animationseffekt zu verwirklichen.

nav ul li {…}
Über display:block wird erreicht, dass die Menüpunkte des mobilen Menüs nicht mehr in einer Zeile, sondern untereinander angezeigt werden.

/*Hamburger-Icon*/
Dieser Bereich ist für die Funktionalität des Hamburger-Menüs zuständig.
Es gibt zwei Hamburger-Icons. Eins ist blau, das andere grau. Die beiden sind deckungsgleich übereinander positioniert. Wird das blaue Hamburger-Icon angeklickt und dabei das Menü ausgefahren, so wird gleichzeitig das graue Hamburger-Icon sichtbar gesetzt und erscheint an der Position des blauen Icons.

Beim Klick auf das blaue Hamburger-Icon wird auf einen Anker referenziert (<a href=“#nav-m“…) und das blaue Hamburger-Icons wird ausgeblendet. Durch die Referenzierung lässt sich der Zustand über die CSS-Pseudoklasse :target prüfen.

Gleichzeitig wird die UL des Menüs von left:-100%; auf left:0; gesetzt (mittels nav a:target ~ ul{left: 0;} ) und bewegt sich dadurch von der bisherigen linken Positionierung (außerhalb des sichtbaren Bereichs) in das Betrachtungsfeld.

nav a#nav-m img, nav a.close img {…}
Die Anzeigegröße des Hamburger-Menü-Icons wird festgelegt.

nav > .close, nav a#nav-m:target {display: none;}
Standardeinstellung ist, dass das graue Hamburger-Menü-Icon (nav > .close) nicht angezeigt wird. Über die CSS-Pseudoklasse :target wird dafür gesorgt, dass das blaue Hamburger-Menü-Icon verborgen wird, wenn es angeklickt wird und dabei den target erhält (a#nav-m:target).

nav a:target ~ ul, nav a:target ~ .close {display: inline-block;}
Wenn der Link aktiv ist (wird auch hier über die CSS-Peseudoklasse a:target geprüft), werden die Navigationsliste sowie das graue Hamburger-Menü-Icon auf sichtbar gesetzt.