Falls jemand bei der Überschrift an eine besondere Aktion einer Fastfood-Kette gedacht hat, muss ich denjenigen leider enttäuschen. Nein, der folgende Artikel handelt von einer aktuell modernen Art einer Webseiten-Navigation: Die Hamburger- bzw. Drei-Linien-Navigation.

Hamburger-Navigation

Die Hamburger-Navigation sollte mittlerweile jeder schon einmal gesehen haben. Sie taucht heutzutage nicht nur auf Webseiten, sondern auch in unzähligen mobilen Apps auf. Falls es doch noch jemanden geben sollte, der mit diesem Begriff nichts anfangen kann, der sollte dieses Fenster einfach mal auf mindestens 900 Pixel in der Breite verkleinern. Und schon sollten oben links drei Linien auftauchen: Hamburger-Navigation. Bei einem Klick auf diesen Button fährt die Navigation, wie im folgenden Bild zu sehen, aus:

Burger Navigation auf 50226.de

Ohne JavaScript

Während der Umsetzung des mobilen Designs und des Hamburger-Menüs in diesem Blog, ist mir bei einer vorherigen Recherche aufgefallen, dass alle vorfügbaren Lösungen auf JavaScript basieren. Dass es jedoch auch ohne JavaScript und zwar ausschließlich mit HTML und CSS3 umsetzbar ist, zeige ich im Folgenden.

Im Prinzip basiert der Trick auf einem Anker, einem entsprechenden Anker-Selektor und CSS-Transitions:

Der HTML-Code ist recht simpel aufgebaut. Zwei Dinge müssen hierbei beachtet werden: Erstens, arbeiten wir hier mit zwei Links. Während der Erste standardmäßig sichtbar ist, soll der Zweite erst dann sichtbar werden, wenn man auf den ersten Link geklickt hat. Zweitens, der erste Link ist ein Anker und zeigt auf #nav.

Das Spannende folgt nun im CSS-Code. Die Liste (ul) wird 80 Pixel links vom Rand platziert, so dass man sie nicht sieht. Durch den Ausdruck transition:all .3s ease teilen wir dem Browser mit, dass jede Änderung an den Attributen in einer 0,3-sekündigen Animation dargestellt werden soll. Der Ablauf sieht nun wie folgt aus: Wenn man auf den ersten und sichtbaren Link geklickt hat, wird dieser ausgeblendet a#nav:target {display:none} (Zeile 14) und der zweite Link a:target ~ .close {display:inline-block} (Zeile 19) sowie die Liste a:target ~ ul {left:0} (Zeile 23) sichtbar.

Das war es auch schon. Das was andere mit mehreren hundert Zeilen JavaScript versuchen, schafft man auch in wenigen Zeilen reinem CSS-Code. ;)

blogroll
tags