Link der aktuell angezeigten Seite hervorheben
Geschrieben von MK   
10.09.2005

Zur besseren Orientierung eines Besuchers auf der Website, wird oft der Link der gerade angezeigten Seite hervorgehoben. Eine Möglichkeit dafür wird auf webcredible aufgezeigt.

Zunächst wird eine Navigation angelegt:

<ul>
<li><a xhref="http://localhost/Projekte/joomla_net/#" class="start">Start</a></li>
<li><a xhref="http://localhost/Projekte/joomla_net/#" class="impressum">Impressum</a></li>
<li><a xhref="http://localhost/Projekte/joomla_net/#" class="kontakt">Kontakt</a></li>
</ul>

Dabei erhält jeder Link eine Klasse und das "body"-Element jeder Seite wird mit einer ID (Individualformat) versehen. So erhält die Startseite die ID <body id="start">, die Seite mit dem Impressum die ID <body id="impressum"> und die Kontaktseite <body ="kontakt">. Diese ID kennzeichnet eindeutig die aufgerufene Seite. Mit Hilfe von CSS kann man nun relativ einfach für den Link der aktuell angezeigten Seite eine Eigenschaft zur Hervorhebung definieren.

Zum Beispiel:
#start .start, #impressum .impressum, #kontakt .kontakt { font-weight: bold; }

Genutzt wir hier die Möglichkeit mittels Individualformat und Klasse zu selektieren. Nur wenn die Startseite (id="start") aufgerufen wurde, wird der Link "Start" mit der Klasse "start" hervorgehoben. Auf den weiteren Seiten geschieht dies ebenso.
Letzte Aktualisierung ( 31.03.2006 )