Horizontales Dropdown-Menü

05.08.2009

Horizontales Drop-Down-Menü, Klapp-Navigation

Im Laufe der Zeit nimmt der Umfang einer Website immer mehr zu, Inhalte und Themen werden erweitert und irgendwann gibt es Platzprobleme bei der Navigation. Oder man hat von vornherein einen umfangreichen Inhalt, erstellt z.B. eine Vereins-Website mit vielen Sparten und Abteilungen. Wie soll man da noch übersichtlich navigieren?
Nun, ein sogenanntes "Drop-Down-Menü" oder eine "Ausklapp-Navi" macht's möglich. In der Umsetzung oft gefürchtet, aber mit etwas Überlegung und System dennoch machbar. Mit einer "Schritt-für-Schritt-Anleitung" werden wir nachfolgend auch dieses Problem meistern. Dass unsere "Klapp-Navi" auch "klappen" wird, zeigt das vorweggenommene Ergebnis unserer Demo .

1.1. Der HTML-Code

Beginnen wir mit dem HTML-Code, den wir anschließend per CSS in Szene setzen. Eine horizontale Drop-Down-Navi besteht im Prinzip aus mehreren, nebeneinander angeordneten Vertikal-Navigationen. Diese wiederum bestehen aus einer Haupt-Liste als "Hülle" und einer weiteren Liste, welche die ausklappbaren Links enthält. Somit ergeben sich je Themenblock zwei verschachtelte Listen. Je Thema soll es drei Unterthemen geben, zu denen durch den Hovereffekt die Einzellinks erscheinen. Selbstverständlich könnt ihr auch mehr oder weniger Links verwenden. Ich habe im folgenden HTML-Code die Bedeutung der einzelnen Elemente per Kommentar angefügt, so dass sich an dieser Stelle weitere Erläuterungen erübrigen. Die "Rauten" # (hier als Platzhalter verwendet) müsst ihr natürlich später durch eure Echt-Links ersetzen.
Da später unsere Menüleiste gefloatet wird, achtet bereits jetzt darauf, nach dem Schließen von #menu auch wieder zu clearen.

<div id="menu">

   <ul>

      <li>

         <h3>Thema 1</h3>

            <ul>

               <li><a href="#">Thema 1.1</a></li>

               <li><a href="#">Thema 1.2</a></li>

               <li><a href="#">Thema 1.3</a></li>

            </ul>

         </li>

   </ul>

</div>

<div style="clear: both;"> </div>

Kopiert euch diesen Code und fügt ihn innerhalb eures body ein.
Für ein zweites Thema kopiert lediglich den Code innerhalb des #menu-Divs und fügt ihn nochmals vor dem Schließen von #menu ein. Ersetzt jeweils "Thema 1" durch "Thema 2".
Auf diese Weise könnt ihr so viele Themenblöcke wie benötigt einfügen.

Seht euch nun das Ergebnis in unserer Demo 1 an (gerne auch nochmal den Quelltext): Das lässt zwar so was ähnliches wie eine Klapp-Navi erahnen, ist aber noch ziemlich weit davon entfernt, um diesem Namen auch gerecht zu werden. Außerdem sollten die einzelnen Themenblöcke ja horizontal nebeneinander angeordnet werden und nicht untereinander stehen. Gemach, gemach: Wir benötigen nur etwas "CSS" und schon verzaubern wir den rustikalen HTML-Code in ein ansehnliches Drop-Down-Menü.
Damit euch dieser "Zaubereffekt" deutlich und verständlich wird, formatieren wir nun Schritt für Schritt und sehen uns die jeweiligen Zwischenergebnisse an. An dieser Stelle ein erster Hinweis: Idealerweise habt ihr im Falle des Internet Explorer als Browser zumindest die Version 7. Zum IE 6 kommen wir dann später.

1.2. Reset der Abstände

Damit unsere Navigation in verschiedenen Browsern einheitlich dargestellt wird, resetten wir die browserspezifischen Abstände sämtlicher Elemente auf "Null". Auf diese Anleitung sei verwiesen.

/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}

2. Formatierung der Menüleiste

Mit den nachfolgenden Angaben bringen wir etwas Farbe in die Hintergrundmenüleiste, definieren die Schrift, sorgen mit line-height für eine vertikale Textausrichtung und verwenden die Float-Angabe um späteren Float-/Clear-Problemen mit den einzelnen Listen vorzubeugen.

/*--formatiert die Menüleiste--*/
#menu {
width: 100%;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}

Sehen wir uns das Zwischenergebnis in Demo 2 an. Na ja, es kommt etwas (sehr viel) Hintergrundfarbe ins Spiel, aber ansonsten sieht noch alles recht dürftig aus.

3. Formatierung der Navigationsblöcke

Nun wollen wir dafür sorgen, dass die einzelnen Navigations- oder Themenblöcke nicht untereinander, sondern nebeneinander angeordnet werden. Dies bewirken wir, indem wir unseren äußeren "Listenhüllen" ein float: left; zuweisen. Ferner bekommen sie einen Breitenwert (damit sich später die Links schön einheitlich darunter anordnen) und wir lassen die Listenpunkte verschwinden:

/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: 140px;
list-style-type: none;
}

Demo 3 zeigt uns das Ergenis dieser Arbeit. Aha! Unsere Themenblöcke befinden sich zumindest schon mal nebeneinander und haben nicht mehr diese Aufzählungspunkte.

4. Überschrift- und Linkformatierung

Nun gestalten wir die Überschriften für die einzelnen Themen (ich verwende hierzu "h3") und die einzelnen Links im Normal- und Hoverzustand. Das ist nichts besonderes, es werden hauptsächlich Rahmen* und ein paar Farben für Schrift und Hintergrund zugewiesen, diese könnt ihr nach eigenem Gusto wählen.
* Hinweis: Ein Leser hat mich darauf aufmerksam gemacht, dass zur korrekten Darstellung im Internet Explorer 7 eine Rahmenangabe für die Überschrift zwingend erforderlich ist. Dem ist tatsächlich so, wenngleich mir der Grund dafür bislang unbekannt ist. Verseht deshalb also die Überschrift mit einem Rahmen; ggf. mit der identischen Hintergrundfarbe, damit er nicht auffällt. Alternativ funktioniert es auch ohne Rahmen wenn ein padding-Wert hinterlegt wird.

/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #003366; /*--erforderlich für IE 7--*/
background: #ff8000;
}

/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #ff9224;
color: #003366;
}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: #ff9224;
background: #003366;
}

Hey, da ist ja endlich unsere Klappnavi - siehe Demo 4. Permanent und ausgeklappt. So hatten wir das aber nicht gewollt. Also: Weiterarbeiten!

5. Die Links werden "eingeklappt"

Sorgen wir zunächst dafür, dass sich die Menüleiste nicht über die gesamte Höhe der einzelnen Links erstreckt. Die diesbezüglichen Angaben sind kommentiert. Sodann lassen wir die permanent dastehenden Links verschwinden, indem wir sie "einklappen". Hierzu weisen wir der Linkliste #menu ul ul ein display: none; zu.

/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}

In Demo 5 sind unsere Links verschwunden, einfach weg und nicht mehr da.

6. Der Drop-Down-Effekt beim Hovern

Jetzt wird's ernst: Wir geben unserer Klapp-Navi den letzten Schliff, indem wir beim Hovern die zuvor eingeklappten Links wieder hervorzaubern. Wenn wir mit der Maus über unseren ersten Listeneintrag innerhalb der äußeren "Themenliste" fahren, sollen unsere Einzellinks ausgeklappt werden. Ihr erinnert euch: Im voherigen Kapitel 5 wurden die Links per display: none; versteckt. Nun holen wir sie wieder hervor, indem wir die "innere Liste" mit display: block; beim Hovern wieder sichtbar machen:

/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}

Voilá - hier ist sie nun: Unsere (fast) perfekte Ausklappnavi, leibhaftig in
Demo 6 .
Weshalb nur "fast" perfekt, werden sich nun die Benutzer moderner Browser fragen. Sie können schließlich keinerlei Probleme erkennen. Anders dagegen die Benutzer des Internet Explorer 7 oder 6: Sie werden noch nicht ganz glücklich sein mit unserem Ergebnis. Verschwinden doch die Einzellinks, wenn man sie anklicken will (IE 7) oder werden im IE 6 überhaupt nicht angezeigt. Schade, aber Abhilfe naht.

7. Der "Whitespace Bug" des Internet Explorers wird behoben

Beheben wir zunächst den Whitespace Bug für IE 7 und kleinere Versionen. Er macht sich durch Lücken zwischen den Links bemerkbar und verhindert, dass wir mit der Maus die einzelnen Links erreichen. Wir bedienen uns dazu des "Star-HTML-Hacks", der den speziellen CSS-Code nur für bestimmte Internet-Explorer-Versionen interpretierbar macht. Hierzu sind folgende CSS-Angaben erforderlich:

/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/

* html #menu ul li {
float: left;
width: 100%;
}

/*--nur für IE 7 erkennbar--*/

*+ html #menu ul li {
float: left;
width: 100%;
}

Damit funktioniert das Drop-Down-Menü zumindest auch im Internet Explorer 7 einwandfrei, wie Demo 7 zeigt.

8. Der Internet Explorer kleiner 7 lernt das Hovern

Zum großen Finale bringen wir auch noch dem Internet Explorer bis Version 6 den Klappmechanismus bei. Diese Versionen haben den Nachteil, dass sie den Hover-Effekt lediglich bei dem Linkelement "a" anwenden können. Wir nutzen ihn jedoch hier für unsere Thementitel. Und die befinden sich nicht innerhalb eines a-Tags, sondern innerhalb eines li-Tags.
Somit müssen wir die älteren Internet-Explorer-Versionen dahingehend trimmen, dass sie auch bei li hovern. Um das zu erreichen hat sich Peter Nederlof verdient gemacht. Er hat ein kleines Script geschrieben, welches den älteren Explorern das Hovern auch für ul- und li-Elemente beibringt.

Besorgt euch zunächst über diesen Link die Datei "csshover3-source.htc".
Speichert diese Datei in das gleiche Verzeichnis, in dem sich auch eure CSS-Datei mit den übrigen Klapp-Navi-Formatierungen befindet. Habt ihr die Style-Angaben innerhalb des Headbereichs eurer HTML-/PHP-Dateien stehen, so speichert diese Datei in das Verzeichnis, in dem sich eure Einzelseiten befinden.
Damit nun der Inhalt der "csshover3-source.htc" auch wirksam wird, müssen wir diese Datei entsprechend einbinden und noch zwei weitere Angaben berücksichtigen. Ergänzt deshalb den CSS-Code wie folgt:

/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #menu ul li a {
height: 1%;
}

Wer noch mit einem Internet Explorer 6 arbeitet, kann nun ebenfalls den Drop-Down-Effekt unserer Navigation genießen, siehe Demo 8.
Wichtig:
Auf eine Besonderheit sei jedoch hingewiesen: Basierte unsere Navigation bis auf den letzten Schritt auf reiner und ausschließlicher CSS-Formatierung, so kommt mit der eingebundenen "csshover3-sourche.htc"-Datei ein kleines Javascript ins Spiel. Das bedeutet: Beim Internet Explorer bis Version 6 funktioniert die Klapp-Navi nur dann, wenn der Benutzer auch Javascript aktiviert hat. Im "worst-case", also bei Deaktivierung von Javascript kann der Benutzer auf die Navigation nicht zugreifen. Wenngleich der Marktanteil von IE 6 schwindet, so ist er zur Zeit dennoch verbreitet und man muss sich dieses Problems bewusst sein.

9. Zugabe: Einzel-Links verwenden

Wer es bis hierher tapfer ausgehalten hat, der hat sich sicher eine "Zugabe" verdient. Bitteschön, hier ist sie:
Nicht zu jedem Menü-Thema ist es erforderlich, dass sich darunter eine Klappnavi öffnet. Es sollte somit auch möglich sein, vereinzelte, direkte Links in die Menüleiste einzubinden. Das schaffen wir nun auch noch, indem wir für diese Links eine CSS-Klasse verwenden (ich habe sie im Beispiel "direkt" benannt) und darauf im HTML-Teil Bezug nehmen. Die Formatierung entspricht der unserer bisherigen Themenüberschriften.
Letztmalig (versprochen) ergänzen wir deshalb unsere CSS-Angaben wie folgt:

/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}

/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:hover {
color: #ff9224;
background: #003366;
border: 1px solid #ccc;
}

HTML-seitig fügen wir nun noch den direkten Themenblock 3 als Einzellink vor dem Schließen von #menu ein:

<ul>

<li><a class="direkt" href="#">Thema 3</a></li>

</ul>

Zum Abschluss auch diesbezüglich eine Demo 9. Ich habe mir (sozusagen als "Belohnung" für euer Durchhaltevermögen) erlaubt, in dieser Demo nochmals den komplett verwendeten HTML- und CSS-Code darzustellen.
Zugegeben: Es war diesmal ein hartes Stück Arbeit. Aber ihr habt gesehen, wie man Stück für Stück einen rustikalen HTML-Code per CSS in eine ansprechende Drop-Down-Navigation verwandeln kann. Natürlich könnt ihr nun anstelle der verwendeten Hintergrundfarben auch Verlaufsgrafiken oder Buttons einsetzen. Eurer Fantasie sind dabei keine Grenzen gesetzt.

Ach - ihr wolltet gar keine Horizontal-Navi, sondern lieber ein vertikales Menü, bei dem die Links zur Seite hin ausklappen? Macht nix. Nehmt trotzdem das horizontale Drop-Down-Menü. Wie man es mit wenigen Handgriffen zur vertikalen Ausklapp-Navi umfunktioniert findet ihr hier erklärt.

10. Eine dritte Ebene einbauen

Eigentlich wollte ich es an dieser Stelle bewenden lassen und das Kapitel "Klappnavi" zuklappen.
In letzter Zeit erreichten mich jedoch mehrere Anfragen, wie man die horizontale Klappnavi um eine weitere Ebene erweitern kann, so dass auch hierzu noch eine kurze Anleitung erfolgt:

Nehmen wir also an, das Thema 1.1 soll noch weiter unterteilt werden in die Themen 1.1.1, 1.1.2, 1.1.3 usw.
Unser bisheriger HTML-Quelltext für das Thema 1 sah so aus (gilt für weitere Haupt-Ebenen entsprechend):

<ul>

      <li>

         <h3>Thema 1</h3>

            <ul>

               <li><a href="#">Thema 1.1</a></li>

               <li><a href="#">Thema 1.2</a></li>

               <li><a href="#">Thema 1.3</a></li>

            </ul>

         </li>

   </ul>

In diesen Bereich wird nun eine dritte Ebene eingebaut, indem wir nach der Themenüberschrift 1.1, und vor dem Schließen des dazugehörigen li-Tags noch eine weitere ul-Liste hinzufügen. Der ergänzende Code (rot) sieht dann so aus:

<ul>

      <li>

         <h3>Thema 1</h3>

            <ul>

               <li> <h3> <a href="#">Thema 1.1</a> </h3>

                <ul>
               <li><a href="#">1.1.1</a></li>
               <li><a href="#">1.1.2</a></li>
               <li><a href="#">1.1.3</a></li>

               </ul>

</li>

               <li><a href="#">Thema 1.2</a></li>

               <li><a href="#">Thema 1.3</a></li>

            </ul>

         </li>

   </ul>

Das Ergebnis sehen wir in Demo 10.
Sieht noch nicht ganz so prickelnd aus, aber mit einigen ergänzenden CSS-Angaben biegen wir das schon hin.

Sorgen wir also wieder dafür, dass die dritte Ebene zunächst unsichtbar bleibt. Sie soll ja erst beim Hovern über das Thema 1.1 erscheinen. Dazu ergänzen wir den CSS-Code mit

/*--versteckt die dritte Ebene--*/

#menu ul li:hover ul ul {
display: none;
}

Das bedeutet: Beim Hovern über den li von Thema 1 bleibt die dritte ul-Liste (Thema 1.1.1 ff) versteckt.
Demo 11 zeigt nun wieder unsere Ursprungsnavi.
Nun soll die dritte Ebene beim Hovern über die zweite Ebene in Erscheinung treten. Außerdem sollen die weiteren Untermenüpunkte nach rechts ausklappen, was durch eine entsprechende absolute Positionierung erfolgt. Ergänzen wir somit die CSS-Angaben mit

/*-- lässt die dritte Ebene beim Hovern über die zweite in Erscheinung treten und nach rechts ausklappen--*/

div#menu ul ul li:hover ul {
display: block;
position: absolute;
top: 0;
left: 100%;
}

Damit haben wir erfolgreich noch eine dritte Ebene in das Klappmenü eingebaut, siehe Demo 12.
Nach dem gleichen Schema könnt ihr nun zu jeder zweiten Ebene eine weitere dritte Ebene hinzufügen.
Die gleichen Code-Ergänzungen funktionieren auch bei der vertikalen Ausklapp-Navi.

11. Ausklapp-Effekt funktioniert nicht im Internerexplorer

Ihr habt alles richtig gemacht, sogar den Code dieser Anleitung exakt kopiert und dennoch verweigert der Internetexplorer den Ausklapp-Effekt?
Dann liegt die Ursache mit ziemlicher Wahrscheinlichkeit daran, dass ihr keinen standardkonformen Doctype verwendet habt. Diesen benötigt nämlich der Internetexplorer, um das CSS-Boxmodell und einige weitere Effekte korrekt darzustellen.

Kurz gefasst geht es darum, dass der Doctype die sogenannte "DTD-URL" enthalten muss. Das ist die Quelle, welche die Definitionen des Doctypes enthält. Vereinfacht ausgedrückt handelt es sich um das Regelwerk aus dem sich ergibt, wie der Browser den Quelltext zu interpretieren hat. Wer dieses Thema vertiefen möchte, wird auf der Seite von Carsten Protsch fündig.

Verwendet also deshalb immer einen Doctype, der den Standard-Modus sicherstellt. Beispielhaft für den Transitional-Doctype also nicht

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

sondern

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

12. Klappnavi bei IPhone und Smartphone

Eine Besucherin berichtete, dass bei diesem Geräten die Klappnavi nicht funktioniere. Von anderen Besuchern wird berichtet, dass die Navi auch mit diesen Techniken funktioniert. Offensichtlich kommt es also auf den jeweiligen Gerätetyp bzw. die dort eingesetzte Software an. Ich brauche diese neuen Kommunikationsgeräte nicht, weshalb ich diese Problematik auch nicht beurteilen kann.

Falls die Klappnavi bei IPhone oder Smartphone nicht funktioniert, soll dieser Zusatzcode Abhilfe schaffen:

<div id="menu">

   <ul>

      <li onmouseover="">

         <h3>Thema 1</h3>

            <ul>

               <li onmouseover=""><a href="#">Thema 1.1</a></li>

               <li><a href="#">Thema 1.2</a></li>

               <li><a href="#">Thema 1.3</a></li>

            </ul>

         </li>

   </ul>

</div>

<div style="clear: both;"> </div>

Aber nun ist endgültig Schluss mit der Klappnavi: Klappe zu und aus.
Viel Erfolg beim Nachbasteln!

nach oben