Verschachtelte Navigationsleiste kontextbezogen anzeigen mit CSS

Vorwort

Die hier vorgestellte Alternative, verschachtelte Navigationsleisten kontextbezogen anzeigen zu lassen, richtet sich an jene, die ihre Navigation mit Hilfe der PHP Include-Anweisung einbinden möchten, aber keinen weiteren PHP-Code nutzen wollen oder können. Oder für Webmaster, die es interessiert, was alles mit dem Nachfahrselektor so möglich ist.

Schritt 1: Ungeordnete Liste in zwei Ebenen erstellen

Wie immer steht am Anfang das HTML-Markup. Mit Hilfe des ID Attributs wird für jede verschachtelte Ebene ein eindeutiger Name zugewiesen, um diesen mit CSS ansprechen zu können.


<ul id="navi">
 <li><a href="index.php">Home </a></li>

 
 <li><a href="seite1.php"">Knoten 1  </a>
  <ul id="knoten_1">
    <li><a href="seite1_1.php">Unterknoten 1 </a></li>
    <li><a href="seite1_2.php">Unterknoten 1 </a></li>
    <li><a href="seite1_3.php">Unterknoten 1 </a></li>
    <li><a href="seite1_4.php">Unterknoten 1 </a></li>
  </ul>
 </li>

 <li><a href="seite2.php">Knoten 2  </a>
  <ul id="knoten_2">
    <li><a href="seite2_1.php">Unterknoten 2 </a></li>
    <li><a href="seite2_2.php">Unterknoten 2 </a></li>
    <li><a href="seite2_3.php">Unterknoten 2 </a></li>
    <li><a href="seite2_4.php">Unterknoten 2 </a></li>
  </ul>
 </li>

 <li><a href="seite3.php">Knoten 3  </a>
  <ul id="knoten_3">
    <li><a href="seite3_1.php">Unterknoten 3 </a></li>
    <li><a href="seite3_2.php">Unterknoten 3 </a></li>
    <li><a href="seite3_3.php">Unterknoten 3 </a></li>
    <li><a href="seite3_4.php">Unterknoten 3 </a></li>
  </ul>
 </li>
</ul>

Schritt 2: Unterpunkte der Navigation mit Hilfe von CSS ausblenden

Die folgenden Style-Angaben beziehen sich nur auf die relevanten Angaben, die für die kontextbezogene Ausgabe notwendig sind. Wie Navigationsleisten mit CSS gestaltet werden, könnt ihr hier » lesen. In den unten stehenden Style-Angaben werden zunächt einmal die ID Selektoren notiert und mit display:none; ausgeblendet. Das bewirkt, dass beim Aufruf der index.php (Startseite) alle Unterpunkte der Navigation geschlossen sind.

/* Knoten ausblenden */
 
UL#knoten_1 ,
UL#knoten_2 , 
UL#knoten_3 
{ 
 display:none;
}

Schritt 3: Unterpunkte der Navigation kontextbezogen mit Hilfe von CSS einblenden

Mit Hilfe von Nachfahrenselektoren können die Unterpunkte der Navigation kontextbezogen angezeigt werden. Dazu werden die Style-Angaben wie folgt erweitert.


/* Knoten bei Bedarf einblenden */

#seite1 UL#knoten_1 ,
#seite2 UL#knoten_2 , 
#seite3 UL#knoten_3 
{
 display:block;
 background:#ddd;
}

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

Damit alles wie gewünscht funktioniert, müssen in den einzelnen HTML-Dateien im body-Tag noch diese Angaben gemacht werden.

Angaben für index.php
<body>

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

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

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

Wie funktioniert's ?

Die CSS Regeln werden angewandt, wenn bspw. Selektor knoten_1 Nachfahre von Selektor seite1 ist. Da der Selektor seite1 nur einmal pro Seite vorkommen darf, werden auch nur die Unterpunkte von Knoten_1 eingeblendet. Dasselbe gilt für alle anderen Selektoren.

Hier » das erste Zwischenergebnis.

Das war's auch schon mit der kontextbezogenen Anzeige. Wer wissen möchte, wie sich mit dem Nachfahrenselektor der aktuelle Navipunkt hervorheben und maskieren lässt, damit ein erneutes Klicken verhindert wird, kann hier» weiterlesen.

erstellt am 21.03.2011

nach oben