Markierung des aktiven Navigationsfeldes

[Gunnar Bittersmann]

@@Tino:

nuqneH

<ul id="navigation">
   <li class="active"><a href="company.html">Unternehmen</a></li>
   <li class="active"><a href="#">Investoren</a></li>
   <li class="active"><a href="#">Kunden</a></li>
   <li class="active"><a href="#">Panel User</a></li>
   <li class="active"><a href="#">Presse</a></li>
</ul>

Wenn alle Geschwisterelemente dieselbe Klassenzugehörigkeit haben, dann ist die Klasse sinnlos. Statt per '.active' wären sie auch per '#navigation li' selektierbar.

Die Klassenbezeichnung "active" ist unglücklich gewählt, da sie an die CSS-Preudoklasse ':active' erinnert, die etwas ganz anderes tut. Besser wäre "selected" oder "current".

Der Menüpunkt der aktuellen Seite sollte aber gar kein Link sein: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Damit erübrigt sich auch eine Klasse:

<ul id="navigation">  
   <li>Unternehmen</li>  
   <li><a href="investoren.html">Investoren</a></li>  
   <li><a href="kunden.html">Kunden</a></li>  
   <li><a href="paneluser.html">Panel User</a></li>  
   <li><a href="presse.html">Presse</a></li>  
</ul>

Die Formatierung des Menüpunkts der aktuellen Seite per '#navigation li', davon abweichende Foramtierungen für die anderen Menüpunkte per '#navigation li a'.

Die Generierung des Menüs samt Nichtverlinkung der aktuellen Seite kann man natürlich einer serverseitigen Logik (SSI, PHP, ...) überlassen. Dabei könnte es einfacher sein, immer ein 'a'-Element einzubauen, für die aktuelle Seite jdoch ohne 'href'-Attribut*:

<ul id="navigation">  
   <li><a>Unternehmen</a></li>  
   <li><a href="investoren.html">Investoren</a></li>  
   <li><a href="kunden.html">Kunden</a></li>  
   <li><a href="paneluser.html">Panel User</a></li>  
   <li><a href="presse.html">Presse</a></li>  
</ul>

In diesem Fall die Formatierung des Menüpunkts der aktuellen Seite per '#navigation li' bzw. '#navigation li a', davon abweichende Foramtierungen für die anderen Menüpunkte per '#navigation li a:link, #navigation li a:visited'.

Qapla'

* Ich weiß, nicht das schönste Markup, aber durchaus erlaubt.