Alle Anleitungen Diese und weitere Anleitungen finden Sie unter http://stellatest.de/anleitungen

Aktuellen Navigationspunkt hervorheben

<body id="seite1">
<div id="navigation">
<a href="#" class=seite1> Seite1</a> | <a href="#" class="seite2">Seite2</a>

Beispiel: Folgende Navigation ist so gestaltet, dass der Menüpunkt der aktuellen Seite (seite1) in weißer Farbe vor rotem Hintergrund hervorgehoben wird:

Vorbereitung

Der aktuelle Menüpunkt soll auf jeder Seite hervorgehoben werden und zwar ohne individuelle Codierung im Quelltext. Der Quelltext für die Navigation soll auf jeder Seite gleich lauten, damit dieser ohne individuelle Anpassung in identischer Form in jede Seite kopiert werden kann. In einer geplanten späteren Erweiterung soll die Navigation außerhalb der Homepageseiten in einer eigenen Datei gepflegt werden können. Auf jeder Seite soll die Navigation in Form eines Include-Befehl eingebunden werden können. Es ist daher notwendig, dass keine individuelle Auszeichnung im Quellcode stattfindet.

Lösungsweg: Die Hervorhebung des aktiven Links wird über eine unabhängige CSS-Datei gesteuert. Voraussetzung dafür ist, dass der aktive Menüpunkt, der hervorgehoben werden soll, über die Seitenstruktur identifiert werden kann.

Umsetzung

Kennzeichnen Sie jede Seite durch eine eineutige ID im body-Tag. Beispiel:<body id="seite1">

Schreiben Sie die Navigation in eine eindeutig identifizierbare DIV-Box. Beispiel: <div id="navigation">...</div>

Kennzeichnen Sie im Menü jeden Menüpunkt durch eine Klasse, die für die HTML-Seite steht, die durch den Link aufgerufen werden soll:

<body id="seite1">
<div id="navigation">
<a href="seite1.html" class="seite1">Seite1</a> | <a href="seite2.html" class="seite2">Seite1</a>
</div>
</body>

Diese Quelltext-Struktur ermöglicht die eindeutige Identifikation des aktuellen Links. Der Link mit der Klasse, die mit der ID der Seite übereinstimmt, ist der aktuelle Link. Dieser Link kann über die CSS-Vererbung gestaltet werden.

Bestimmen Sie über CSS-Befehle die Hervorhebung des aktiven Menüpunktes: Im folgenden Beispiel wird der aktive Link der HTML-Seiten mit der Schriftfarbe rot (color:red) gekennzeichnet und fett hervorgehoben (font-weight:bold).

In diesem Schritt bestimmen Sie die Bedingungen, die erfüllt sein müssen, damit die Hervorhebung erzeugt wird.
Schreiben Sie hierfür zum Beispiel folgende Befehle mit einem Texteditor (z.B. Notepad++) und speichern Sie die Datei unter dem Namen screen.css

#seite1 #navigation a.seite1,
#seite2 #navigation a.seite2 {background-color: red; color: white; font-weight: bold}

Erklärung: Die Hervorhebung wird ausgeführt für das Link-Elemente a mit der Klasse "seite1" (CSS: .seite1) innerhalb eines Elements mit der ID "navigation" (CSS: #navigation) innerhalb eines Elements mit der ID "seite1" (CSS: #seite1) befindet.
Das Komma fügt eine weitere Bedingung hinzu, die erfüllt sein muss, damit die Hervorhebung auch für den Menüpunkt "seite2" erfolgen kann. Da dies nur der Fall ist, wenn gleichzeitig ein übergeordnetes Element mit der ID "seite2" vorhanden ist (z.B. mit <body id="seite2">), tritt dieser Fall erst dann ein, wenn die Seite 2 geöffnet wird und dort im Quelltext dem body die ID "seite2" zugewiesen wurde.

Steuerung durch externe CSS-Datei: Damit die externe CSS-Datei (im Beispiel screen.css) den CSS-Befehl auf einer Seite ausführen kann, muss diese Datei auf der HTML-Seite verlinkt werden. Schreiben Sie den folgenden Link in den Bereich zwischen <head> und </head> in ihre HTML-Seite:

Alternativ können Sie die angegebenen CSS-Befehle in den Headbereich der Seite zwischen <style> und </style> schreiben, wie in der vorliegenden Seite.

Ergebnis

Die Navigationsbox kann nun in identischer Form in jede Seite der Homepage kopiert werden. In der Weiterentwicklung dieser Navigation ist es nun möglich diese zu exportieren und ähnlich der CSS-Datei auf jeder Seite lediglich als Link einzubinden.

johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).