Aktuellen Naivigationspunkt hervorheben und maskieren mit CSS

Hier könnt ihr erfahren, wie sich der aktuelle oder aktive Navigationspunkt mit dem Nachfahrenselektor hervorheben lässt. Außerdem wird, als kleines Highlight, der aktuelle Navipunkt maskiert, um ein erneutes Klicken zu verhindern. Dies soll eine, auf CSS basierte, Alternative zum Entfernen des sog. Deppenlink sein.

Schritt 1: Ungeordnete Liste modifizieren

Um die einzelnen Navigationspunkte mit CSS ansprechen zu können, müssen für die einzelnen Listenelemente eindeutige Namen vergeben werden. Das <span>id="name"</span> Element wird zur Maskierung benötigt, um ein erneutes Klicken zu verhindern.


<ul id="navi">
 <li><span id="navi-home"></span><a href="index.php">Home </a></li>
 
 <li><span id="k1"></span><a href="seite1.php">Knoten 1  </a>
  <ul id="knoten_1">
    <li><span id="k1_1"></span><a href="seite1_1.php">Unterknoten 1 </a></li>
    <li><span id="k1_2"></span><a href="seite1_2.php">Unterknoten 1 </a></li>
    <li><span id="k1_3"></span><a href="seite1_3.php">Unterknoten 1 </a></li>
    <li><span id="k1_4"></span><a href="seite1_4.php">Unterknoten 1 </a></li>

  </ul>
 </li>

 <li><span id="k2"></span><a href="seite2.php">Knoten 2  </a>
  <ul id="knoten_2">
    <li><span id="k2_1"></span><a href="seite2_1.php">Unterknoten 2 </a></li>
    <li><span id="k2_2"></span><a href="seite2_2.php">Unterknoten 2 </a></li>
    <li><span id="k2_3"></span><a href="seite2_3.php">Unterknoten 2 </a></li>
    <li><span id="k2_4"></span><a href="seite2_4.php">Unterknoten 2 </a></li>
  </ul>
 </li>

 <li><span id="k3"></span><a href="seite3.php">Knoten 3  </a>
  <ul id="knoten_3">
    <li><span id="k3_1"></span><a href="seite3_1.php">Unterknoten 3 </a></li>
    <li><span id="k3_2"></span><a href="seite3_2.php">Unterknoten 3 </a></li>
    <li><span id="k3_3"></span><a href="seite3_3.php">Unterknoten 3 </a></li>
    <li><span id="k3_4"></span><a href="seite3_4.php">Unterknoten 3 </a></li>
  </ul>
 </li>
</ul>

Schritt 2: Styleangaben zum Maskieren des aktuellen Links


/* Aktuellen Link maskieren  */

#navi span {
 position:relative;
 margin-bottom:-2.5em;
 width:13em;
 height:2.5em;
 background:url(1pixelbg_span.gif) repeat 0 0 transparent;    /* Benötigt der IE 6 + 7 */
 z-index:1;
 display:none;
}


/* Maskierung anwenden */
#home  #navi-home , 

#seite1 #k1 , 
#seite2 #k2 , 
#seite3 #k3 , 

.UP_1konten_1 #k1_1 , 
.UP_2konten_1 #k1_2 , 
.UP_3konten_1 #k1_3 , 
.UP_4konten_1 #k1_4 ,

.UP_1konten_2 #k2_1 , 
.UP_2konten_2 #k2_2 , 
.UP_3konten_2 #k2_3 , 
.UP_4konten_2 #k2_4 ,

.UP_1konten_3 #k3_1 ,
.UP_2konten_3 #k3_2 ,
.UP_3konten_3 #k3_3 ,
.UP_4konten_3 #k3_4 
{
 display:block;
}

Im ersten Deklarationsblock werden alle nötigen Vorbereitungen zum Maskieren des aktuellen Links getroffen. Die wichtigste Regel ist dabei margin-bottom:-2.5em die dafür sorgt, dass sich das <A>...</A> Element über das <span>...</span> legt. Mit z-index:1 wird die Reihenfolge getauscht, so dass sich das <span>...</span> über das <A>...</A> Element legt. Damit nicht alle Navipunkte gleichzeitig maskiert werden, muss diese Deklarationsanweisung mit display:none; erst einmal ausgeblendet werden.

In der zweiten Deklaration wird mit display:block;, dass Ausgewählte <span>...</span> Element wieder eingeblendet. Somit ist ein erneutes Klicken des aktiven Links nicht mehr möglich.

Schritt 3: Styleangaben zum Hervorheben des aktuellen Links mit Hilfe des Folgeelement-Selektors

Dieser wählt das direkt folgende <A>...</A> Element aus. Somit bleibt es uns erspart, für die <A>...</A> Elemente eigene Namen zu vergeben (<a id="name_1"... u.s.w.). Der Rest der Deklaration ist identisch mit der zum Maskieren des aktuellen Links.

/* Aktuellnen Link hervorheben */
#home #navi-home + A , 

.UP_1konten_1 #k1_1 + A , 
.UP_2konten_1 #k1_2 + A , 
.UP_3konten_1 #k1_3 + A , 
.UP_4konten_1 #k1_4 + A ,

.UP_1konten_2 #k2_1 + A , 
.UP_2konten_2 #k2_2 + A , 
.UP_3konten_2 #k2_3 + A , 
.UP_4konten_2 #k2_4 + A ,

.UP_1konten_3 #k3_1 + A ,
.UP_2konten_3 #k3_2 + A ,
.UP_3konten_3 #k3_3 + A ,
.UP_4konten_3 #k3_4 + A  
{
 background-color:#09c;
 color:#fff;
}
	   

Schritt 4: Im body-Tag der einzelnen Seiten dem id und class Attribut Werte zuweisen

Angaben für index.php
<body id="home">

Angaben für seite1_1.php
<body id="seite1" class="UP_1konten_1"> 

Angaben für seite1_2.php
<body id="seite1" class="UP_2konten_1">

Angaben für seite1_3.php
<body id="seite1" class="UP_3konten_1">  

Angaben für seite1_4.php
<body id="seite1" class="UP_4konten_1">  

u.s.w

Der Eintrag von ( id="seite1" ) und ( class="UP_1konten_1" ) im Body bewirkt, dass der Knoten bei einem Klick auf ein Menüpunkt geöffnet bleibt.

Nun folgen noch einige Sonderangaben für unsere Lieblings-Browser


 /* Sonderangaben für IE 6 und 7 */

/* IE6 */

* html * {
 height:1%;
}

/* Weil der IE6 Folgeelement-Selektoren nicht versteht wird hier mit einer transparenten Grafik ( z.B. 400 x 100 Pixel ) der aktuelle Link markiert */ 

* html #navi span {
 background:url(arrowleft.gif) no-repeat right center transparent;    
}

* html #seite1 #k1 , 
* html #seite2 #k2 , 
* html #seite3 #k3 
{
 background:url(arrowdown.gif) no-repeat right center transparent;  /* Grafik für Knoten */
}

/* IE7 */

*+ html * {
 zoom:1;                /* Wird benötigt wenn Regel ( ul#navi li:hover ul { display:block; } ) angewandt wird */
}

*+ html #navi span {
 float:left;           /* Damit sich beim Zoomen die span Elemente nicht verschieben */ 
} 

Fertig !

Hier » das vorläufige Endergebnis.

Wichtiger Nachtrag

Obwohl die hier vorgestellte Möglichkeit, Navigationspunkte kontextbezogen anzeigen zu lassen, semantisch korrekt ist, folgt noch ein Hinweis.

Natürlich ist es besser, dass nur so viel Menüpunkte im HTML-Markup stehen wie auch auf der jeweiligen Seite angezeigt werden. Dieses Problem(chen) kann mit einer weiteren CSS-Regel beseitigt werden.


UL#navi LI:hover UL {
 display:block;
} 	   

Nun werden alle Navigationspunkte beim Überfahren mit der Maus angezeigt. Somit ist das HTML-Markup mit dem Inhalt identisch. Bleibt nur der aktuelle Link. Diese lassen sich mit CSS leider nicht ersetzen. Aber was soll's. Es geht ja in erster Linie darum, ein erneutes, sinnloses Klicken zu vermeiden. Oder?

Hier » nun das Endergebnis.

erstellt am 31.03.2011

nach oben