mehrere Navigationsebenen

Ein Menü mit mehreren Navigationsebenen.

Es ist alles Geschmackssache.

Ich bevorzuge, nachdem der Besucher aus der waagerechten Menüzeile oben eine grobe Vorauswahl getroffen hat, eine Navigation mit aussagekräftigen Menüpunkten. Sofern die gewählte Seite noch weitere Unterseiten hat werden diese eingerückt sichtbar gemacht. Der Besucher sieht auf einen Blick, das sind Punkte mit weitergehenden Informationen zur aktuellen Seite.

Das Prinzip ist simpel: Ein Linkliste, jeweils in ein div Element eingepackt. Die Untermemüs eingebettet in ein weiteres div, die Struktur ist mit den Einrückungen gut erkennbar. Den Rest übernimmt CSS.

Die Struktur findet sich im CSS Code wieder, wenn Sie die Syntax etwas drauf haben verstehen Sie die Schreibweise #MENUE_2 div div als "div, welches Kind vom div und das wiederum Kind von #MENUE_2 ist".

Im gewählten Beispiel sei Item 2 aktiv, deshalb hier die eingerückten Links zu den Seiten Item 2a und 2b.

Besonderheiten

Den Links wird eine Hintergrundfarbe zugeordnet, die beim Überfahren mit dem Cursor durch die Pseudoklasse :hover per CSS geändert wird. Dadurch entsteht der Rollover-Effekt. Da <a>;..</a>; als Inline-Element nur den für seinen Inhalt erforderlichen Raum einnimmt, werden die Links mit display:block definiert, um den Balken auf das gesamte <div>; Element auszudehnen.

Fertig und zum Ausprobieren

der html Code

<div id="MENUE_2">
  <div><A href="">Item 1</A></div>
  <div><A href="" class="m_act">Item 2</A></div>
  <div>
    <div><A href="">Item 2 a</A></div>
    <div><A href="">Item 2 b</A></div>
  </div>
  <div><A href="">Item 3</A></div>
  <div><A href="">Item 4</A></div>
</div>

und einige Zeilen css

<style type="text/css" media="screen">;
#MENUE_2 { font-family: Helvetica, sans-serif;font-size:90%;}
#MENUE_2 div { 
    background-color: #f16733; width: 120px; 
    border-bottom: 2px solid #ffffff; }
#MENUE_2 div div { 
    width: 110px; border-left: 10px solid white; border-bottom:none }
#MENUE_2 a { 
    font-weight:bold;color: white;white-space:nowrap;display:block;
    text-decoration:none; padding: 1px 0px 1px 5px; 
    border:thin solid #e05020 }
#MENUE_2 a.m_act {background-color:#ffb080}
#MENUE_2 a:hover { background-color: #b03010;}
</style>;