14.01.2008

Link der geöffneten Seite hervorheben

Für den Besucher ist es oft eine kleine Orientierungshilfe, wenn der Link der jeweils geöffneten Seite optisch hervorgehoben wird.
Allerdings wundern sich manche Webmaster, weshalb die unter a:active hinterlegten Linkformatierungen für diesen Fall nicht greifen. Hierzu muss man wissen, dass a:active lediglich den Linkzustand im Moment des Anklickens mit der Maus beschreibt, und zwar nur so lange, wie mit der Maus auf den Link "gedrückt" wird. Öffnet sich im Anschluss die gewählte Seite, so muss man den Link dieser Seite auf andere Art formatieren, um ihn hervorzuheben.

Damit ein derart "aktiver Link" (im Sinne des Links der jeweils geöffneten Seite) optisch hervorsticht, müssen wir ihm lediglich die gewünschten CSS-Angaben zuweisen. Dies kann in Form eines ID's erfolgen, denn schließlich kommt dieser Link auf der gerade geöffneten Seite nur einmal vor. Die Verwendung einer CSS-Klasse ist allerdings ebenso möglich.

Die Navigation und die einzelnen Linkzustände definieren wir per CSS z.B. so:

#navi
{
width: 200px;
font-family: Verdana, Arial, sans-serif;
font-size: 0.9em;
}

#navi ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navi a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
text-decoration: none;
}

#navi a:link, #navi a:visited
{
color: #EEE;
}

#navi a:hover
{
background-color: #369;
color: #fff;
}

Der Link der jeweils geöffneten Seite soll (damit er auffällt) einen orangenen Hintergrund haben. In der CSS-Datei fügen wir nun noch folgenden ID hinzu, der hier mit "aktuell" bezeichnet ist.

#navi #aktuell a
{
background-color: #f60;
}

Für die Navi selbst verwenden wir folgenden HTML-Code in Form einer Liste. Im Beispiel soll die Website aus drei Einzelseiten bestehen, so dass der nachfolgende Code auf jeder Seite enthalten ist und unser Menü darstellt.

<div id="navi">
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="##">Seite 2</a></li>
<li><a href="###">Seite 3</a></li>
</ul>
</div>

Nun öffnen wir die HTML-Datei von Seite 1 und ergänzen den Navi-Code um unseren ID für die Hervorhebung des Links von Seite 1:

<div id="navi">
<ul>
<li id="aktuell"><a href="#">Seite 1</a></li>
<li><a href="##">Seite 2</a></li>
<li><a href="###">Seite 3</a></li>
</ul>
</div>

Wir wiederholen diesen Vorgang auch auf Seite 2, allerdings fügen wir den ID "aktuell" nun nicht beim Link zu Seite 1, sondern beim Link zu Seite 2 ein:

<div id="navi">
<ul>
<li><a href="#">Seite 1</a></li>
<li id="aktuell"><a href="##">Seite 2</a></li>
<li><a href="###">Seite 3</a></li>
</ul>
</div>

Genauso verfahren wir mit Seite drei und allen weiteren Seiten. Beispiel

Eine weitere Variante, wie der "aktive" Link noch zusätzlich mit einer Grafik hervorgehoben werden kann, wird in dieser Anleitung erklärt.

Solange eine Website nicht zu umfangreich ist und nicht zu viele Links in der Navigation enthält, kann man dies auf die beschriebene Weise manuell bewerkstelligen. Bei größeren Navigationen mit vielen Links empfiehlt es sich, die komplette Navigation mit einem kleinen PHP-Script zu includen (einzufügen). Wie dies funktioniert ist hier beschrieben.

nach oben

Webspace preiswert! - Alfahosting.de