Cookies helfen uns bei der Bereitstellung unserer Dienste. Durch die Nutzung unserer Website, erklären Sie sich damit einverstanden, dass wir Cookies setzen.

basta!blog - Was uns bewegt...

Thorsten Bastian

Weblog der Internet- und Kommunikationsagentur basta!media aus Köln. Agenturleben, Branchen-News und Netzfundstücke.

Ein Responsive-Menü mit CSS

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.

Bildschirmfoto 2014-08-11 um 10.52.16

 

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. 

Bildschirmfoto 2014-08-11 um 10.59.49

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:

Bildschirmfoto 2014-08-11 um 11.15.09

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).

Bildschirmfoto 2014-08-11 um 11.19.40

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:

Bildschirmfoto 2014-08-11 um 11.22.48

 

Beispiel-Navigtion in mobiler Version:

Bildschirmfoto 2014-08-11 um 11.25.02

 

Beispielmenü (CSS- und HTML-Datei) als Download: Responsive_Menu_css-only.zip 

 

Google AdWords: Einschließung von ähnlichen Begrif...
basta!media sponsert das Barcamp Köln

Ähnliche Beiträge

 

Kommentare 1

Gäste - Zinkengabel am Freitag, 06. März 2015 20:13

Hallo,
eine schöne, sehr einfache CSS-Lösung. Wie sieht es aber mit der Browserkompatibilität aus? Im Standardbrowser von Androide lässt sich das Menü bei mir nicht ausklappen. Im Firefox für Android funktioniert es wiederum.

Gruß Zinkengabel

Hallo, eine schöne, sehr einfache CSS-Lösung. Wie sieht es aber mit der Browserkompatibilität aus? Im Standardbrowser von Androide lässt sich das Menü bei mir nicht ausklappen. Im Firefox für Android funktioniert es wiederum. Gruß Zinkengabel
Bereits registriert? Hier einloggen
Gäste
Samstag, 03. Dezember 2016