Ich habe mir schon lange vorgenommen mal ein Tutorial für ein horizontales Dropdown-Menü zu erstellen. Und da ich gerade mal wieder ein wenig Zeit und Lust hatte, habe ich mal hingesetzt und ein wenig ausprobiert.

Das ist dabei rausgekommen:

Wenn ihr ebenfalls etwas Zeit und Lust mitbringt, zeige ich in diesem Tutorial, wie ihr ein schickes horizontales Dropdown-Menü erstellt. Das Menü wird, mit Ausnahme der Hauptmenü-Icons, CSS-only, wir verwenden also keine Bilddateien.

Das Grundgerüst

Fangen wir mit der HTML-Struktur eines einfachen Menüs (ohne Untermenüs) an. Wir definieren einen übergeordneten Div-Container (menu) eine Aufzählungsliste (ul) mit Listenelementen (li), welche von einem Hyperlink (a) umschlossen sind, damit das gesamte Listenelement und nicht nur der Name klickbar ist.

<div id="menu">
	<ul>
		<a href="#"><li>Home</li></a>
		<a href="#"><li>Über mich</li></a>
		<a href="#"><li>Kategorien</li></a>
		<a href="#"><li>Tags</li></a>
		<a href="#"><li>Gästebuch</li></a>
		<a href="#"><li>Impressum</li></a>
	</ul>
</div>

Ohne Style-Deklaration wird das Menü vertikal dargestellt:

Damit das Menü horizontal angeordnet wird, definieren wir den Div-Container sowie die Aufzählungsliste und die Listenelemente wie folgt:

#menu {
	position: relative;
	width: 900px;
	margin: 20px auto;
}

#menu ul {
	position: absolute;
	margin: 0 auto;
	list-style: none;
}

#menu ul li {
	float: left;
	margin: 0 0 0 20px;
}

womit das Menü nun wie gewollt horizontal ausgerichtet ist:

Um das Menü um Untermenüs zu erweitern, fügen wir im HTML-Code beim entsprechenden Hauptmenüpunkt eine weitere Aufzählungsliste mit weiteren Listenelementen ein.

<div id="menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Über mich</a></li>
		<li><a href="#">Kategorien</a>
			<ul>
			<a href="#"><li>Kategorie 1</li></a>
			<a href="#"><li>Kategorie 2</li></a>
			<a href="#"><li>Kategorie 3</li></a>
			<a href="#"><li>Kategorie 4</li></a>
			<a href="#"><li>Kategorie 5</li></a>
			</ul>
		</li>
		<li><a href="#">Tags</a></li>
			<ul>
			<a href="#"><li>Tag 1</li></a>
			<a href="#"><li>Tag 2</li></a>
			<a href="#"><li>Tag 3</li></a>
			<a href="#"><li>Tag 4</li></a>
			<a href="#"><li>Tag 5</li></a>
			</ul>
		</li>
		<li><a href="#">Gästebuch</a></li>
		<li><a href="#">Impressum</a></li>
	</ul>
</div>

Die weiteren Aufzählungslisten sowie die darin enthaltenen Listenelemente müssen entsprechend formatiert werden: die Aufzählungsliste positionieren wir absolut, 30 Pixel unterhalb des Hauptmenüs. Die Listenelemente des Untermenüs sollen nicht mehr horizontal sondern vertikal ausgerichtet werden. Daher werden diese nicht mehr gefloatet.

#menu ul ul {
	position: absolute;
	top: 30px;
	padding: 0;
	margin: 0;
}

#menu ul ul li {
	float: none;
	margin: 0;
}

Das Menü zeigt nun die Hauptmenüelemente sowie die Untermenüelemente an:

Damit die Untermenüs nur angezeigt werden, wenn das Hauptmenüelement gehovert wird, verschieben wir die Untermenüs aus dem Bildausschnitt. Bei :hover des Hauptmenüelements wird das Untermenü dann wieder zurück ins Bild geholt:

#menu ul ul {
	top: -9999px;
}

#menu ul li:hover ul {
	top: 55px;
}

Das Grundgerüst für unser Menü ist damit abgeschlossen. Machen wir uns nun an den Feinschliff.

Das Feintuning

Beginnen wir mit der Schriftart. Ich habe in der Demo den Google Web Font „Bree Serif“ verwendet. Diesen binden wir als Standard-Schriftart für das gesamte Menü in die Style-Deklaration wie folgt ein:

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

#menu {
	font-family: 'Bree Serif', serif;
}

Widmen wir uns nun den Hauptmenüpunkten. Wir formatieren die Schrift und binden bei jedem Listenelement ein vorangestelltes Icon ein. Gleichzeitig verändern wir auch noch das Aussehen der Hyperlinks.

Die Icons mit einer Größe von 20 x 20 Pixeln binden wir als img in den HTML-Code ein. Mittels border-radius erhalten diese einen runden Hintergrund.

Wo wir gerade beim HTML sind, ergänzen wir die bisherigen Untermenüs um eine Überschrift (h3). Ändert die HTML-Deklaration von oben wie folgt:

<div id="menu">
	<ul>
		<li><a href="#"><img src="../images/home.png">Home</a></li>
		<li><a href="#"><img src="../images/ich.png">Über mich</a></li>
		<li><a href="#"><img src="../images/kategorien.png">Kategorien</a>
			<ul>
			<h3>Meistgenutzte Kategorien</h3>
			<a href="#"><li>Kategorie 1</li></a>
			<a href="#"><li>Kategorie 2</li></a>
			<a href="#"><li>Kategorie 3</li></a>
			<a href="#"><li>Kategorie 4</li></a>
			<a href="#"><li>Kategorie 5</li></a>
			</ul>
		</li>
		<li><a href="#"><img src="../images/tags.png">Tags</a>
			<ul>
			<h3>Meistgenutzte Tags</h3>
			<a href="#"><li>Tag 1</li></a>
			<a href="#"><li>Tag 2</li></a>
			<a href="#"><li>Tag 3</li></a>
			<a href="#"><li>Tag 4</li></a>
			<a href="#"><li>Tag 5</li></a>
			</ul>
		</li>
		<li><a href="#"><img src="../images/gb.png">Gästebuch</a></li>
		<li><a href="#"><img src="../images/impressum.png">Impressum</a></li>
	</ul>
</div>

und definiert im CSS

#menu h3 {
	font-size: 16px;
	color: #fff;
	padding: 10px;
	margin: 0;
	background: #000;
	line-height: 20px;
}

#menu ul li {
	line-height: 50px;
}

#menu ul li a {
	color: #000;
	text-decoration: none;
}

#menu ul li a:hover {
	color: #999;
}

#menu ul li img {
	float: left;
	width: 16px;
	height: 16px;
	margin: 14px 5px;
	padding: 6px;
	background: #999;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

Kurz zur Erklärung des line-height: Die Listenelemente des Hauptmenüs erhalten eine Zeilenhöhe von 50 Pixeln. Das ist notwendig, da wir die Untermenüs nach unten versetzen. Zwischen Hauptmenü und Untermenü wäre damit ein Abstand, der das hovern auf die Untermenüelemente unmöglich macht. Durch die Erhöhung der Zeilenhöhe gibt es keinen Abstand mehr und man kann ohne Probleme vom Hauptmenü in das Untermenü wechseln.

Die Zeilenhöhe von 50 Pixeln macht es notwendig die Bilddateien vertikal zu zentrieren. Zu diesem Zweck, definieren wir einen Außenabstand (margin).

So schaut’s mittlerweile aus:

Kommen wir zu den Untermenüs, welche wir noch etwas aufhübschen werden. Wir verpassen der Aufzählungsliste des Untermenüs einen schicken Box-Schatten (box-shadow), passen Innen- und Außenabstände der Liste sowie deren Elementen an, trennen die Listenelemente durch eine dezente Rahmenlinie unten und formatieren die Hyperlinks.

#menu ul ul {
	margin: 0;
	-webkit-box-shadow: 0 10px 20px #888;
	-moz-box-shadow: 0 10px 20px #888;
	box-shadow: 0 10px 20px #888;
}

#menu ul ul li {
	float: none;
	font-size: 16px;
	padding: 5px 10px;
	text-align: left;
	text-transform: uppercase;
	margin: 0;
	border-bottom: 1px solid #ddd;
	line-height: 20px;
}

#menu ul ul li:hover {
	background: #333;
	color: #fff;
}

#menu ul ul a {
	color: #333;
	text-decoration: none;
}

Da wären wir:

Die Untermenüs sollen einen kleinen Pfeil in Richtung des Icons des Hauptmenüelements erhalten

Dazu nutzen wir das Pseudo-Element :before:

#menu ul ul:before {
	position: absolute;
	content:"";
	width: 10px;
	height: 10px;
	top: -5px;
	left: 20px;
	background: #000;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

Kurz erklärt: wir erstellen mit der Anweisung ein Quadrat, drehen es mittels transform um 45 Grad und positionieren es in das Untermenü, so dass der Pfeil genau mittig auf das Hauptmenüelement zeigt.

Das letzte Element in der Liste werden wir anders formatieren; insbesondere entfernen wir die Rahmenliste unten. Dazu erstellen wir eine Klasse, die sich auf die Listenelemente des Untermenüs bezieht.

#menu ul ul li.last {
	font-size: 12px;
	border-bottom: none;
	text-transform: none;
}

Die zusätzliche Klasse müssen wir im HTML-Code beim letzten Listenelement der Untermenüs ergänzen:

<div id="menu">
	<ul>
		<li><a href="#"><img src="../images/home.png">Home</a></li>
		<li><a href="#"><img src="../images/ich.png">Über mich</a></li>
		<li><a href="#"><img src="../images/kategorien.png">Kategorien</a>
			<ul>
			<h3>Meistgenutzte Kategorien</h3>
			<a href="#"><li>Kategorie 1</li></a>
			<a href="#"><li>Kategorie 2</li></a>
			<a href="#"><li>Kategorie 3</li></a>
			<a href="#"><li>Kategorie 4</li></a>
			<a href="#"><li>Kategorie 5</li></a>
			<a href="#"><li class="last">Letztes Listenelement &rarr;</li></a>
			</ul>
		</li>
		<li><a href="#"><img src="../images/tags.png">Tags</a>
			<ul>
			<h3>Meistgenutzte Tags</h3>
			<a href="#"><li>Tag 1</li></a>
			<a href="#"><li>Tag 2</li></a>
			<a href="#"><li>Tag 3</li></a>
			<a href="#"><li>Tag 4</li></a>
			<a href="#"><li>Tag 5</li></a>
			<a href="#"><li class="last">Letztes Listenelement &rarr;</li></a>
			</ul>
		</li>
		<li><a href="#"><img src="../images/gb.png">Gästebuch</a></li>
		<li><a href="#"><img src="../images/impressum.png">Impressum</a></li>
	</ul>
</div>

Dem letzten Listenelement verpassen wir noch einen Pfeil nach rechts mittels des HTML-Zeichens →.

Damit wäre das Menü schon einsatzbereit.

Als Sahnehäubchen wollen wir zum Schluss noch die Listenelemente, genauer gesagt den Farbübergang bei :hover, per transition animieren. Wir fügen dazu noch hinzu:

#menu ul li a {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

für die Listenelemente des Hauptmenüs und

#menu ul ul li {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

für die Listenelement der Untermenüs.

Da fällt mir gerade noch eins ein: wir könnten den Hintergrund der Icons der Hauptmenüelemente noch bei :hover verändern und den Farbübergang ebenfalls animieren. Dazu ergänzen wir

#menu ul li img {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

#menu ul li:hover img {
	background: #000;
}

Fertig.

Browserkompatibilität

Das Menü sollte in allen aktuellen Browsern einheitlich dargestellt werden. Da der Internet Explorer 9 keine transition verarbeiten kann, sind die Farbübergänge der Listenelemente nicht animiert. Das sollte allerdings verschmerzbar sein.

Wie immer gibt es die Live-Demo zum Probefahren:

und den Download zur freien Verwendung

Variante

Eine Variante hätte ich noch. Ein wenig anders aufgemacht und mit Untermenüs:

Auch hier gibt es eine Live-Demo:

sowie den Download:

Viel Spass damit.