Dieses Ausklappmenu der eleganteren Art enthüllt Unterpunkte bei Mauskontakt in einer schmalen Unterzeile. Das Submenü bleibt nach dem hovern sichtbar und das Menü legt sich nicht über den Seiteninhalt. Eine passable Möglichkeit viel Content strukturiert zu präsentieren.

Credits: Raphael Goetter

Submenü Horizontal besteht aus standardkonformen, CSS-verzierten HTML-Listen mit einem Hauch JavaScript. Das Menü wird von Screenreadern und Suchmaschinenbots verstanden. Einziger Nachteil: Bei abgeschaltetem JavaScript kann im Browser nur die Hauptebene benutzt werden.

Das Submenu passt in eine schlanke Unterzeile

Live Demo im neuen Fenster: Submenu Horizontal

Für den Ausklappeffekt sorgen ein paar Zeilen JavaScript. Der Code gehört in den head jeder Seite.

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

Die Funktion montre rufen wir später mit einem onmouseover auf und übergeben als Parameter die id des aufzuklappenden Submenüs. Auf diese Weise begegnen wir einer kleinen Schwäche des Internet Explorer mit dem hover Befehl und sorgen dafür, dass das Untermenü ausgeklappt bleibt.

Der Wert 10 in der Schleife for (var i = 1; i<=10; i++) legt die Anzahl der maximalen Menueinträge auf der obersten Ebene fest. Bei Bedarf muss hier nachjustiert werden.

Den HTML-Quelltext zeigen wir beispielhaft für die ersten drei Menueinträge:

<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="#">Eins</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Eins a</a></li>
<li><a href="#">Eins b</a></li>
<li><a href="#">Eins c</a></li>
<li><a href="#">Eins d</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover=”montre(‘smenu2′);”><a href=”#”>Zwei</a></dt>
<dd id=”smenu2″>
<ul>
<li><a href=”#”>Zwei a</a></li>
<li><a href=”#”>Zwei b</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover=”montre(‘smenu3′);”><a href=”#”>Drei</a></dt>
<dd id=”smenu3″>
<ul>
<li><a href=”#”>Drei a</a></li>
<li><a href=”#”>Drei b</a></li>
<li><a href=”#”>Drei c</a></li>
<li><a href=”#”>Drei d</a></li>
<li><a href=”#”>Drei e</a></li>
</ul>
</dd>
</dl>
</div>

Auf oberster Ebene besteht die Navigation aus Definitionslisten <dl>. Der Listentitel <dt> dient als Aufhänger für das onmouseover-Event und den Link zur Rubrik. Das Untermenü packen wir in die bekannte <ul> die wir diesmal in die Beschreibung <dd> der Definitionsliste schachteln. Der <dd> geben wir praktischerweise noch die id des Untermenüs.

Weitere Menüpunkte werden analog konstruiert. Das gesamte Menü braucht dann nur noch die div id=” menu”.

Auf HTML-Seite haben wir damit alles für unser Submenü Horizontal vorbereitet.

body { margin: 10px; padding: 0; font: 16px Verdana, Arial, Helvetica, sans-serif; }

a { text-decoration: none; }

dt, dl, dd, ul, li { list-style-type: none; margin: 0 10px 0 0; padding: 0; }

dd { margin-top: 4px; }

#menu { position: absolute; left: 50px; top: 20px; height: 40px; width: 90%; border-bottom: 1px solid #000; }

Hier sorgen wir für die passenden Rahmenbedingungen. Wir legen für die gesamte Seite die Schriftart Verdana und 10px Abstand zum Bildschirmrand fest. Linkunterstreichungen schalten wir aus ästhetischen Gründen mit text-decoration: none ab. Von allen benutzten dt, dl, dd, ul. und li -Elementen setzen wir bis auf 10px margin auf der linken Seite margins und padding auf Null. So haben alle Browser die gleichen Vorgaben.

Mit 10px margin links rücken wir die Einträge optisch ein bisschen auseinander. Die 4px margin-top auf das dd-Element schieben das Unternmenu 4px weit nach unten, was aufgelockerter wirkt. Das gesamte Menü wird schließlich absolut positioniert, erhält eine feste Höhe von 40px und eine Rahmen-Linie unten.

Was bleibt ist das Feintuning der Links:

#menu a { background: #fff; color: #000; text-decoration: none; }

#menu a:hover { color: #ff0000; }

#menu dl { float: left; }

#menu li { display: inline; }

#menu li a { color: #ff0000; }

#menu li a:hover { background-color: #f5f5f5; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{ position: absolute; left: 0; font-size: 11px; width: 500px; }

Nur zur Sicherheit schalten wir nochmal die Standard-Link-Unterstreichung ab und stellen alle Links ganz klassisch auf Schriftfarbe schwarz (#000) vor weißem (#fff) Hintergrund. hover-Linkfarbe wir rot (#ff0000), das Submenü hätten wir gerne stets linksbündig (float: left) und die Einträge in den Submenüs nicht wie bei Block-Level-Elementen üblich Zeile für Zeile sondern schön nebeneinander dargestellt (display: inline).

Bevorzugte Farbe der Links im Untermenu wird rot (#menu li a {color: #ff0000;} und nur für das Berühren dieser Links definieren wir eine dezente graue Hintergrund-Tönung (background-color: #f5f5f5).

Alle Untermenüs erhalten die gleiche absolute Position (left: 0;) und eine kleinere Schriftgröße (11px). Weil jedes Untermenü eine eigene id hat, wäre es hier möglich die Untermenüs jeweils farblich abzusetzen. Um alle Untermenüs immer genau unter dem Haupteintrag erscheinen zu lassen, muss nur der Eintrag left: 0; entfernt werden.

Getuntes Menü mit Hintergrundbild

Als Ansatzpunkte weiterer Verfeinerungen unseres Submenü Horizontal bieten sich Link-Farbe und Rahmen-Effekte. Oben haben wir dem Menü ein Hintergrundbild gegeben und den Link-Hintergrund transparent gestaltet (background: transparent;).

Live Demo im neuen Fenster: Submenu verfeinert

Getestete Browser: IE Mac/Win ab 5.5, Firefox, Mozilla, Opera ab 7.1, Netscape ab 6.0.