In einigen meiner Themes verwende ich für die Darstellung des Navigationsmenüs bei geringen Bildschirmauflösungen (Stichwort: Media Queries) ein Flyout-Menü, welches auf Knopfdruck aus- und auch wieder einfährt. So beispielsweise in meinem neuen Theme ‚NEUN‘:
In diesem Artikel beschreibe ich Schritt für Schritt, wie eine Lösung für ein ausfahrbares Menü aussehen könnte. Wir verwenden dazu lediglich CSS3-Funktionen, kein Javascript oder ähnliches. Wie sieht’s aus, Lust?
Navigation erstellen
Fangen wir an, indem wir zunächst ein horizontales Navigationsmenü erstellen. Für die HTML-Struktur eines einfachen Menüs definieren wir einen übergeordneten Div-Container (#nav
) eine Aufzählungsliste (ul
) mit Listenelementen (li
).
<div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Über mich</a></li> <li><a href="#">Kategorien</a></li> <li><a href="#">Tags</a></li> <li><a href="#">Gästebuch</a></li> <li><a href="#">Impressum</a></li> </ul> </div>
Wichtig ist, dass wir den Navigations-Container als ID deklarieren. Wir werden später sehen, warum.
Schauen wir uns das Ergebnis im Browser an:
Damit das Menü horizontal angeordnet wird, definieren wir den Div-Container sowie die Aufzählungsliste und die Listenelemente im Stylesheet:
#nav { float: left; width: 900px; margin: 20px auto; } #nav ul { margin: 0; padding: 0; list-style: none; } #nav ul li { float: left; padding: 10px 15px; }
womit das Menü nun wie gewollt horizontal ausgerichtet ist:
Hübschen wir das Menü noch mit Schlagschatten, Hintergrundfarbe, runden Ecken und gestylten Links auf:
#nav { position: relative; float: left; width: 900px; margin: 20px auto; background: #333; font-family: Arial, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 5px #888; -moz-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; } #nav ul { margin: 0; padding: 0; list-style: none; } #nav ul li { float: left; } #nav ul li a { padding: 10px 15px; display: block; color: #fff; text-decoration: none; } #nav ul li a:hover { background: #111; color: #aaa; }
So schaut’s nun aus:
Menü responsiv gestalten
Das soll uns als Ausgangspunkt erst einmal reichen. Kümmern wir uns nun um das responsive Flyout-Menü.
Wer diesen Artikel gelesen hat, hat bereits die Grundlagen für responsives Layout und weiß, dass es mehrere Möglichkeiten gibt, Media Queries in die eigene Webseite einzubauen. Die einfachste Lösung ist, die Media Queries in das bestehende Stylesheet zu integrieren.
Und das machen wir in diesem Beispiel auch. Wir scrollen an das Ende des Stylesheets und fügen nach allen bisherigen Einträgen folgenden Aufruf ein:
@media all and (max-width: 640px) { }
Diese Definition einer Media Query bewirkt, dass jede Deklaration, die zwischen den geschweiften Klammern steht, bei einer Auflösung kleiner als 640 Pixel Vorrang vor den bisher im Stylesheet definierten Deklarationen hat.
Zur Verdeutlichung soll folgendes einfaches Beispiel dienen (hat nichts mit dem Flyout-Menü zu tun):
body { background: white; } @media all and (max-width: 640px) { body { background: black; } }
Ab einer Auflösung von 640 Pixeln wird der Webseitenhintergrund weiß, bei weniger als 640 Pixeln schwarz dargestellt. Ganz einfach, oder?
Für die Umwandlung in ein Flyout-Menü müssen wir das Menü komplett umkrempeln. So sollen die Listenelemente nicht mehr horizontal, sondern untereinander angeordnet werden, das Menü soll am oberen Bildschirmrand fixiert werden und sich über die gesamte Seitenbreite erstrecken und die Listenelemente wollen wir voneinander durch eine untere Rahmenlinie abgrenzen.
@media screen and (max-width: 640px) { #nav { position: fixed; top: 0; left: 0; float: none; width: 100%; margin: 0; padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #nav ul li { float: none; text-align: center; border-bottom: 1px solid #555; } }
Damit das letzte Listenelement keine Rahmenlinie erhält, greifen wir auf das Pseudoelement :last-child
zurück und definieren:
#nav ul li:last-child { border-bottom: none; }
So, Zeit für ein Zwischenergebnis:
Öffnen und Schließen des Menüs
Es fehlen noch die Schaltflächen für das Öffnen und Schließen des Menüs. Die Schaltfläche zum Schließen fügen wir als zusätzliches Listenelement in das vorhandene Menü ein. Allerdings soll dieser Menüpunkt natürlich nur dann sichtbar sein, wenn das Menü ausgefahren ist. Dazu müssen wir dem Listenelement eine eigene Klasse zuweisen (close
). So haben wir die Möglichkeit das Listenelement gezielt anzusprechen.
<div id="nav" style="text-align: justify;"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Über mich</a></li> <li><a href="#">Kategorien</a></li> <li><a href="#">Tags</a></li> <li><a href="#">Gästebuch</a></li> <li><a href="#">Impressum</a></li> <li class="close"><a href="#">↑ Menü schließen</a></li> </ul> </div>
Im Stylesheet fügen wir hinzu:
#nav ul li.close { display: none; } @media screen and (max-width: 640px) { #nav ul li.close { display: block; } }
So schaut’s aus:
Die Schaltfläche zum Öffnen fügen wir als eigenständiges Element ein, welches wir ebenso wie das Menü am oberen Bildrand fixieren.
Vor dem Navigations-Container fügen wir ein:
<div class="nav-open"> <a href="#nav" title="Menü anzeigen">Navigation anzeigen ↑</a> </div>
Als Ziel für den Link geben wir das Nav-Menü (#nav
) an. Warum, werden wir gleich sehen.
Dem Stylesheet fügen wir hinzu:
.nav-open { display: none; } @media screen and (max-width: 640px) { .nav-open { position: fixed; top: 0; left: 0; background: #333; font-family: Arial, sans-serif; display: block; width: 100%; } .nav-open a { padding: 10px 15px; display: block; color: #fff; text-align: center; text-decoration: none; } }
Das Menü müssen wir, wenn die Media Query aktiv ist, aus dem sichtbaren Bereich nach oben verschieben. Wir wollen das Menü ja nur sehen, wenn wir auf Öffnen klicken. Dazu verändern wir die Top-Position des Menüs:
@media screen and (max-width: 640px) { #nav { top: -200%; } }
Wir haben als Ziel für den Öffnen-Link #nav
angegeben. Damit haben wir die Möglichkeit das Pseudoelement :target
ins Spiel zu bringen, welches für unser Flyout-Menü die elementare Funktion darstellt.
Und zwar so:
@media screen and (max-width: 640px) { #nav:target { top: 0; } }
Das bewirkt folgendes: wenn das Element #nav
als Ziel eines Links angesprochen wird, ändert sich die Top-Position des Menüs. Das Menü „fährt“ so aus dem nicht sichtbaren Bereich an die oberen Bildkante.
Und das war es im Grunde schon. Wer mag, kann nun noch mittels transition
das Aus- und Einfahren des Menüs animieren.
So geht’s:
@media screen and (max-width: 640px) { #nav { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } }
Und fertig. Wer das Menü ausprobieren möchte, klickt auf den folgenden Link:
Wenn du die Demo auf deinem PC ausprobieren möchtest, musst du bedenken, dass das erst ab einer Breite von weniger als 640 Pixeln funktioniert. Schieb dein Browserfenster also zusammen, bis dein Browser auf das responsive Menü umstellt.
Wenn du keine Lust zum nachbauen hat, kannst du dir das fertige Menü unter folgendem Link herunterladen.
Viel Spass damit.
[…] In einigen meiner Themes verwende ich für die Darstellung des Navigationsmenüs bei geringen Bildschirmauflösungen (Stichwort: Media Queries) ein Flyout-Menü, welches auf Knopfdruck aus- und auch wieder einfährt. […]
sauberes tutorial! danke fuer die muehe :)
Vielen Dank für die tolle Anleitung. Leider klappt es weder bei meiner Versuchswebsite, noch mit Ihrer Beispielwebsite auf meinem Handy (Nokia Lumia 800 mit Windows Phone und IE9) nicht. Haben Sie eine Idee, an was das liegen könnte?
Sonst eine SUPER-Website!!!
Hallo Julian,
was klappt denn nicht? Sollte mit dem IE9 generell kein Problem geben.
Gruß Olli
Hallo Olli
Vielen Dank für deine Antwort. Auf dem Handy wird die normale Desktop-Ansicht angezeigt, anstelle der mobile-optimierten Version mit dem Flyout-Menu.
Doch deine Website hat mich extrem inspiriert, weshalb ich jetzt wohl auf WordPress mit deinem Theme „Dreizehn“ umsteige :-). Dort klappt’s auch auf dem Handy mit der mobile-optimierten Version.
Gruss Julian
Hallo Julian,
ah okay. Dann kann ich mir vorstellen woran es liegt: in meinem Beispiel wird das Menü erst bei einer Breite von weniger als 640 Pixeln umgestellt. Da dein Nokia sicher eine höhere Auflösung hat, wird das Menü auch nicht responsiv dargestellt.
Bei „DREIZEHN“ nutze ich übrigens eine andere Technik für die responsive Navigation (Checkbox-Hack). Viel Spaß mit dem Theme :)
Gruß Olli
Hallo Olli
Vielen Dank für deine Antwort.
Ich habe nun trotzdem etwas mit dem Checkbox-Hack experimentiert, da ich meine Website möglichst schnell für mobile Geräte optimieren möchte, aber die Umstellung auf WordPress wohl noch etwas andauern wird.
Es klappt nun schon ziemlich gut, nur ist bei mir die Schriftgrösse und der Textumbruch extrem vom verwendeten Handy/Betriebssystem abhängig, bei „Dreizehn“ praktisch immer gleich. Wie machst du das?
Ausserdem finde ich deinen „Nach oben-Knopf“ toll. Ein Tutorial dazu würde mich sehr freuen :-).
Gruss Julian
Hallo Julian,
du solltest für den
body
eine feste Schriftgröße definieren. Du hast dort derzeit1em
angegeben. Das wird aber imo von Browser zu Browser unterschiedlich interpretiert.Der „Nach oben“-Knopf ist recht simpel. Du kannst dir den Quellcode dazu ja mal in meinem (gerade eben fertiggestellten) Theme ‚VIERZEHN‘ anschauen.
Gruß Olli
Ich glaube, dass hier eher ein meta viewport tag im header vergessen wurde.
Hallo Olli,
vielen Dank für die tolle Anleitung. Ich habe sowas schon lange gesucht, aber mit den anderen Tutorials bin ich nie richtig zurecht gekommen.
Zwei Fragen habe ich noch:
1. Du hast zwar eine Anleitung dazu, aber wenn ich das mache, dann bringt es mir die Navi fürs iPhone unschön durcheinander, und zwar: ich möchte gerne in der Navigation die verschiedenen Menupunkte schön über die ganze breite verteilen. Hast du mir einen Tipp?
2. Wenn ich mein iPhone horizontal halte um mir die Website anzusehen, dann füllt die Navigation den ganzen Screen – bzw. geht darüber hinaus. Leider ist – im Unterschied zu deiner Seite – nicht möglich, die nicht nicht sichtbaren Menupunkte zu erreichen.
Bevor ich dir codes poste, wolle ich nur mal so fragen. Vielleicht ist es was kleines, was ich vergessen habe.
Für ein Feedback bin ich dir unendlich dankbar!
Liebe Grüsse aus Zürich
Markus
Hallo Markus,
was meinst du mit „über die ganze Breite verteilen“? Im Beispiel sind alle Menüpunkte 100% breit. Möchtest du mehrere Menü-Punkte nebeneinander? Dann musst du die Menüpunkte des Untermenüs (
ul li li
) z.B. auf 50% Breite setzen und floaten.Zu deinem zweiten Punkt: das ist das Problem von fixiert positionierten Elementen (
fixed
). Du könntest versuchen das Menü absolut zu positionieren. Dann wäre es scrollbar. Aber das ist natürlich vom Aufbau deiner Webseite abhängig.Gruß Olli
Hi Olli,
danke für das Tutorial!
Weil oben ein paar Leute geschrieben haben, dass sie am iPhone das responsive Menü nicht sehen können: Ich hab die max-width mal auf 979px umgestellt (so ist es zumindest bei Bootstrap) – das funktioniert :)
Danke nochmal!
Christoph
Hi,
super Tutorial. Eine Frage ist aber beim Ausprobieren aufgekommen: Kann man das auch so programmieren, dass man nur den „nav-open“ zum auf- und wieder einklappen der Navi benutzt? Das fände ich aus Usersicht eine coolere Lösung.
Hast du da was parat?
Danke und Gruß
Peter
Hallo Peter,
ja, hab ich :)
In meinen Themes mache ich das seit einiger Zeit mit dem sogenannten Checkbox-Hack, z.B. bei ‚SIEBZEHN‚.
Gruß Olli
Super, danke für den Hinweis und die schnelle Antwort.
Leider klappt es bei mir nur halb. Ich habe mir anhand dieses Artikels eine schöne Fly-In/Fly-Out-Navi für meine mobile Variante gebaut. Das ist genauso wie ich es haben wollte. Jetzt will ich nur noch, dass ich das eingeflogene Menü mit einem Klick auf den Auslöser auch wieder zurückschicke.
Ich habe versucht den Checkbox-Hack soweit zu entschlacken, dass ich eben keinen gelben Head mit Dreiecken habe, sonder nur die Funktion habe. Was ich geschafft habe: das jetzt bei Klick auf das Fly-In-Menü die Seite dorthin springt und das Menü verschwindet. Aber leider eben nicht, das beim erneuten Klick auf „Menü“ das Fly-In Menü wieder verschwindet.
Anbei mal mein Code ohne optische Styles wie Border etc.:
HTML
=============
» Menü
W
A
W
K
CSS
=============
.nav-open {
position: fixed;
background-color:white;
width: 50%;
height:2.5em;
box-sizing: border-box;
-moz-box-sizing: border-box;
right:0;
}
input[type=checkbox] {
display: none;
}
.nav-open a {
padding: 10px 15px;
display: block;
color: #666;
text-align: center;
text-decoration: none;
}
#nav-mobil:target {
top:30%;
right: 0;
}
.nav-open:hover,
.nav-open a:hover {
color:white;
background-color:rgba(128, 0, 0, 1);
}
Also ziemlich nach der Beschreibung hier. Ich steh da gerade auf dem Schlauch, wie ich das eine mit dem anderen verheiraten kann.
Hallo Peter,
das Thema ist dann doch zu umfangreich, um mal eben die Musterlösung in einem Kommentar zu präsentieren.
Was mir aber an deinem geposteten Code aufgefallen ist, dass du die Checkbox (inkl. Label) nicht im Quellcode definiert hast und im Stylesheet auch noch einiges fehlt. Vielleicht hilft es dir, wenn du eines meiner neueren Themes herunterlädst und dir meine Lösung dort mal anschaust.
Viel Erfolg.
Gruß Olli
hi ! super sache.
eine frage.
ich brauche grafiken im menü und habe das so gemacht
wenn ich jetzt das browserfenset nach linsk ziehe ist das menü nicht da wo es sein soll, also nicht echt responsive. wie bringe ich die grafiken + den menütext in den .nav-open div ?
lg
Hi,
dein Code oben ist nicht vollständig. Denke mal, dass WordPress da was nicht übernommen hat. Ich würde Grafiken als Hintergrund einbinden, etwa so:
und übers Stylesheet dann
Gruß Olli
hi und danke für die schnelle antwort !
muss ich den falschen code erwischt haben. hier der richtige
deinen vorschlag wo hin ? in den teil @mediascrenn ?
frage 2 . hast etwas parrat um den text navi öffnen und navi schliessen mit einer grafik so wie hier auf deiner seite im menü auszutauschen ?
lg max
Genau. Es sei denn, du willst die Icons auch in der normalen Ansicht.
Wenn du Icons statt Text möchtest, kannst du das auch über ein Hintergrundbild machen (wie beschrieben).
Gruß Olli
Hey und vielen Dank für das Tut.
Ich hab da nur eine Frage und zwar klappt das alles schon ganz gut nur wenn ich das Menü wieder schließen will, über den Listeneintrag, klappt das nicht-.- was muss ich dafür noch eintragen?
Hoffe auf schnelle Antwort! Liebe Grüße
Hi Nala,
wenn du das wie im Tutorial eingebunden hast, wird die Seite beim Klick auf den Schließen-Link aktualisiert und das Menü ist dadurch wieder geschlossen.
Gruß Olli
Hallo,
vielen Dank für das Tutorial. Dürfen wir das Menü die die Website unserer Schule benutzen?
Viele Grüße
Leo