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="#">&uarr; 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 &uarr;</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:

Demo ansehen

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.

Download starten

Viel Spass damit.