Frank Rohse 18. Oktober 2006

Das perfekte Menü: Teil 6 – Submenü Horizontal

Kein Beitragsbild

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.

Snazzy Borders Screenshot
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.

Snazzy Borders Screenshot
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.

Frank Rohse

Frank war Mitarbeiter im Dr. Web Team in unserer Ahrensburger Zeit. Später machte er sich als Webdesigner mit Schwerpunkt CSS und Barrierearmut selbständig.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

6 Kommentare

  1. hallo,
    die navi gefällt mir sehr gut.
    ich habe die navigation auf meine bedürfnisse umgebaut.
    allerdings verschieben sich alle menus nach rechts wenn die submenus erscheinen.
    wie kann ich dies beheben?
    ich vermute, dass es mit dem befehl float zusammenhängt.
    im verbleib, mfG

  2. Super Menü. Das kann ich gut verwenden. Die Idee gut und von der Umsetztung her wirklich einfach und auch so, dass ich es in Typo reinbekomme.
    Weiter so.

  3. Gilt eigentlich die Aussage zum hover-Problem des IE auch für IE7 und IE8?
    Ansonsten: Sehr praktisches und leicht anpassbares Menü, die Anleitung lässt sich sehr gut nachvollziehen.

  4. die Navigation ist gut, allerdings bleibt immer die unterebene des mouseovers aktiv, auch wenn ich mich eigentlich aktiv auf einer anderen seite befinde. ich finde, das ist etwas verwirrend. es gibt keine grafische unterscheidung zwischen dem aktiven und mouseover navipunkt. lösungsansätze?

  5. Perfekt, Genau diese Navigation habe ich für mein späteres Redesign gesucht. Doch bei der Fülle an Informationen in der Rubrik Navigation werde ich mir zunächst in Ruhe alle Informationen durchlesen und überlegen, ob ich bei dieser Navigation bleibe. Herzlichen Dank für die Anleitungen, Beispiele und Infos in dieser Rubrik.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.