Wir kennen Sie alle - die 3 kleinen übereinander stehenden Striche. Sie sehen aus wie ein Burger und zeigen uns in der mobilen Ansicht einer Website an, dass sich an diesem Punkt die Navigation versteckt. Zur Gestaltung der Navigation für mobile Endgeräte gibt es verschiedenen Möglichkeiten. Heute möchten wir Euch eine Möglichkeit vorstellen welche ausschließlich auf CSS zurückgreift und schnell und einfach umzusetzen ist. Die nachfolgenden Code-Beispiele beziehen sich auf eine statische HTML-Seite, können jedoch problemlos für Content-Management-Systeme etc. adaptiert werden.
Stylesheet und viewport meta-tag integrieren
Hierzu gilt es zunächst den obligatorischen "Viewport-Tag" im <head>-Tag zu verankern, um später das Aussehen der Navigation mit Hilfe der Media Queries, je nach Displaygröße des Endgerätes, zu bestimmen. Anschließend kann mit der eigentlichen Gestaltung der Navigation begonnen werden. Die nachfolgenden Code-Beispiele beziehen sich auf eine statische HTML-Seite, können jedoch problemlos für Content-Management-Systeme etc. adaptiert werden. Zusätzlich wird ein Stylesheet integriert, wodurch das aussehen der Navigation beeinflusst wird.
Die Navigation
Ist dies getan, kann man mit der Gestaltung der Navigation begonnen werden. Wir beginnen damit, die Navigation wie üblich in Form einer ungeordneten Liste (<ul>) anzulegen. Hinzu kommt jedoch, dass wir vor dem eigentlichen Menü eine Checkbox im Quelltext einfügen. Diese bzw. das dazugehörige <label> stellt den späteren Button da, durch den bei einem Klick die Navigation in der mobilen Ansicht dargestellt wird.
Die Checkbox vor der Navigation und deren Funktion
Wie man den Screenshot bereits entnehmen kann, wurde dem <label>-Tag die Klasse "open-menu-label" und dem <input>-Tag die id "open-menu" zugeordnet. Die Namen für die jeweilige Klasse/ID sind frei veränderbar, es muss jedoch darauf geachtet werden. Das Namensänderungen auch in der dazugehörigen CSS-Datei angepasst werden.
Die Checkbox wird anschließend im CSS ausgeblendet, da diese nicht weiter benötigt wird. Grund dafür ist, dass sich Checkboxen nicht ohne weiteres mit Hilfe von CSS stylen lassen, das Label dieser hingegen jedoch schon. Möchte man also einen individuellen und ansprechenden Button für seine mobile Navigation erstellen, ist es einfacher ausschließlich das Label zu stylen. Die Checkbox besitzt ausschließlich die Funktion, bei Aktivierung die nachfolgende Navigationsliste auszuklappen.
Dieses Ausklappen wird mit Hilfe des nachfolgenden Codeschnipsel ausgelöst:
input[type=checkbox]:checked ~ nav {
display: block;
}
Anschließend sieht die CSS-Datei also wiefolgt aus:
Anpassungen für Desktop-Auflösungen
Nach dem Grundsatz "mobile-first", nachdem eine Website zunächst für die kleinsmögliche Auflösung programmiert werden sollte entspricht dies der "Standart-Formatierung". Da man mit wachsender Bildschirmgröße der Endgeräte jedoch wieder zu einer "normalen" Navigation wechselt ist ein Button, durch den die Navigation dargestellt wird überflüssig. Dementsprechend gilt es, das Label der Checkbox ab einer gewissen Auflösung auszublenden (bspw. ab einer Breite von 760px).
Ist dies geschehen ist die eigentlich Funktionalität der Navigation gegeben. Mit Hilfe der Media Queries und CSS kann die Navigation anschließend nach belieben gestaltet werden.
Hier noch zwei kleine Screenshots zur Verdeutlichung.
Beispiel-Navigation in Desktop-Version:
Beispiel-Navigtion in mobiler Version:
Beispielmenü (CSS- und HTML-Datei) als Download: Responsive_Menu_css-only.zip