Vertikales Aufklapp-Menü mit CSS

Wer auf seiner Webseite eine umfangreiche verschachtelte Navigation einsetzen möchte oder muss, wird bestimmt festgestellt haben, dass die Navigation durch die Fülle der Einträge doch sehr unübersichtlich wirkt.

Schön wäre es doch, wenn die Untermenüpunkte erst beim Überfahren mit der Maus eingeblendet werden?

Mit CSS ist es kein Problem die Navigation so zu formatieren, dass sich die Untermenüpunkte erst beim Hovern seitlich aufklappen. Wie das funktioniert, zeigt die folgende Anleitung.

Übrigens werdet ihr im Anschluss dieser Anleitung erfahren, wie sich diese vertikale in einer horizontalen Navigation umwandeln lässt.

1. Navigationsliste erstellen

Wie nicht anders zu erwarten, beginnen wir wie immer mit dem HTML-Markup und erstellen dafür eine ungeordnete Liste UL. Damit es auch Spaß macht, ist die folgende Liste bis zu drei Ebenen tief.

HTML-Dokument


<ul id="navi">
 <li><a href="#">Home </a></li>
 <li><a class="titel" href="#kat1">Kategorie 1 </a>
  <ul>
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 </a>
     <ul>
       <li><a href="#">Thema 4.1 </a></li>
       <li><a href="#">Thema 4.2 </a></li>
       <li><a href="#">Thema 4.3 </a>
	    <ul>
        <li><a href="#">Thema 4.3.1 </a></li>
        <li><a href="#">Thema 4.3.2 </a></li>
        <li><a href="#">Thema 4.3.3 </a></li>
       </ul>
	   </li>
     </ul>
   </li>
  </ul> 
 </li>

 <li><a class="titel"  href="#kat2">Kategorie 2 </a>
 <ul id="knoten_2">
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 </a>
   <ul>
       <li><a href="#">Thema 4.1 </a></li>
       <li><a href="#">Thema 4.2 </a></li>
       <li><a href="#">Thema 4.3 </a></li>
     </ul>
   </li> 
  </ul> 
 </li>

 <li><a class="titel"  href="#kat3">Kategorie 3 </a>
  <ul id="knoten_3">
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 </a></li>
  </ul>
 </li>
</ul>


</div>

Und so sieht es bis jetzt aus.

Style-Angaben

Nun folgen Schritt für Schritt alle CSS-Regeln, um aus der Liste UL so etwas wie eine Navigation zu machen.

2. Außen- und Innenabstände zurücksetzen und Schmuckpunkte ausblenden

ul , li {
 margin:0;
 padding:0;
 list-style:none;
}

Mit diesen Angaben werden alle Außen- und Innenabstände aller UL und LI Elemente auf 0 gesetzt. Somit lassen sich diese Elemente später besser positionieren. Außerdem werden keine Aufzählungszeichen benötigt und mit list-style:none; ausgeblendet.

3. Alle UL Element eine Breite zuweisen und nach links floaten

ul#navi , ul#navi ul {
 width:9.375em;  /* entspricht einer Breite von 150px (150 / 16 )*/
 float:left;
 background:#333;
}

Mit float:left; wird die Navigation so weit nach links verfrachtet, wie es geht. Weiterhin erhalten alle UL und LI Elemente eine feste Breite.

4. Alle LI Elemente relativ positionieren

ul#navi  li  {
 position:relative;
}

Damit sich alle enthaltenen UL Elemente später absolut innerhalb von LI positionieren lassen, wird die Angabe position:relative; benötigt.

5. Alle A Elemente zum Blockelement befördern

ul#navi a {
 display:block;
 padding:5px;
 color:#fff;
 font-weight:bold;
}

Die wichtigste Regel ist display:block und sorgt dafür, dass sich das A-Element über die gesamte Breite der Navigation erstreckt.

6. Alle UL Elemente ausblenden bzw. ins Aus befördern

ul#navi ul  ,                   /* 1. Ebene verschieben */
ul#navi  li:hover ul ul ,       /* 2. Ebene verschieben */
ul#navi  li:hover  ul ul ul  {  /* 3. Ebene verschieben */
 position:absolute;
 left:-9999px;
 top:0;
 background:#000;
}

Weil das Ganze ja ausklappbar sein soll, müssen alle Untermenüpunkte vorerst versteckt werden. Das wird durch position:absolute; erreicht. Somit lassen sich alle Untermenüpunkte in den nicht sichtbaren Bereich verschieben.

7. Ebenen beim Hovern wieder einblenden

ul#navi li:hover ul ,
ul#navi ul  li:hover  ul , 
ul#navi ul  ul li:hover  ul  {
 left:9.375em; /* entspricht 150px */
 }

Damit für Besucher der Webseite keine wichtigen Inhalte verborgen bleiben, werden beim Überfahren (Hovern) mit der Maus die versteckten Navigationspunkte wieder in den sichtbaren Bereich geschoben. Mit left:150px; wird dafür gesorgt, dass sich das Untermenü, neben der Navi platziert.

8. Bloß nicht den Überblick verlieren

ul#navi li:hover > a , 
ul#navi  ul li:hover  > a, 
ul#navi ul  ul  li:hover  > a, 
ul#navi ul  ul ul  li:hover  > a  {
  background:#a33;
  color:#fff;
}

Damit sich die Besucher beim Navigieren besser orientieren können, wird mit der letzten Anweisung dafür gesorgt, dass die angewählten Kategoriepunkte den Hover-Status behalten.

So, das war's mal wieder und so sieht die Navigation aus. Beispiel sehen»

Aber, aber, im IE7, da geht's nicht so richtig

Richtig, wer die Navigation mit dem IE 7 ausprobiert hat, wird festgestellt haben, dass sich die Untermenüpunkte nicht erreichen lassen. Das liegt an den kleinen winzigen Lücken, zwischen den LI Elementen.

Abhilfe schafft folgende Anweisung.

   
/* Diese Angabe soll nur der IE 7 sehen */      
ul#navi li {
  float:left;
   width:100%;
}

Da zu erwarten ist, dass der IE7 noch mehr Sonderangaben benötigt, sollte eine eigene Style Datei erstellt werden. Diese könnt ihr dann mit Conditional Comments im Head Bereich einbinden.

<head>
      <!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->
</head>

Jetzt sollte es auch im IE 7 bestens funktionieren.

Was ist mit den IE 6 ?

Nichts. Die Nutzer dieser Browser bekommen die gesamte Navigation zu Gesicht. Natürlich könnte man hier auch Java Script einsetzen. Da die Navigation ein elementarer Bestandteil einer Webseite ist und nicht nur von Java Script abhängig sein darf, muss in jedem Fall über eine Alternative nachgedacht werden. Und da dieser Browser immer mehr an Bedeutung verliert, können wir diese Alternative auch gleich anwenden. Oder?

Styl-Angaben für den IE 6

ul#navi ul {
  position:relative;
  top:0;
  left:0;
  width:9.375em; /* entspricht einer Breite von 150px */
  /* Oder Pixelangaben */
}

ul#navi ul ul  a{
 padding-left:20px;
 }
ul#navi a {
 height:1%;
  /* haslayout damit sich das A Element über die gesamte Breite erstreckt*/
 }
 
ul#navi  a:hover  {
  background:#dad;
  color:#000;
 }

 
html ul#navi a.titel , ul#navi a.titel:hover  {
  font-weight:bold;
   color:#000;
   background:#ddd;
 }

Auch diese Style Angaben sollten ebenfalls in einer separaten Datei ausgelagert werden.

<head>
      <!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css"><![endif]-->
</head>

So sieht es im IE 6 aus

screenshot

Nun wünsche ich euch noch viel Spaß mit eurer neun Aufklapp-Navi!

Und hier geht es weiter zur horizontalen Navigation.

erstellt am 12.09.2011

nach oben