Direktnavigation
Weitere Infos
Inhaltsbereich
9.4 »Sie sind hier«: aktuelle Seite hervorheben
Was jetzt noch fehlt, ist das, was viele in der Stadt aufgestellte Stadtpläne mit einem roten Punkt und der Beschriftung »Sie sind hier« anbieten: die optische Rückmeldung an den Besucher, wo er sich gerade befindet.
Und wie so oft ist die Lösung einfach, wenn man weiß, wie. Im HTML-Grundgerüst haben Sie für body vorsorglich eine ID definiert:
- <body id="startseite"> auf der Startseite
- <body id="kontaktseite"> auf der Kontaktseite
Bei der Erstellung der Navigationsliste haben Sie den beiden Listenelementen vorsorglich ebenfalls eine ID zugewiesen:
- <li id="navi01"> im Menüpunkt für die Startseite
- <li id="navi02"> im Menüpunkt für die Kontaktseite
Eine Kombination dieser IDs benutzen Sie, um mithilfe einfacher verschachtelter Selektoren den aktuellen Menüpunkt hervorzuheben. Völlig ohne Programmierung, nur mit CSS.
ToDo: Den aktuellen Navigationspunkt optisch hervorheben
- Fügen Sie nach der Regel für #navibereich a den folgenden Style hinzu:
#startseite #navi01 a,
#kontaktseite #navi02 a {
color: black;
background-color: white;
border-bottom-color: white;
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.
Die CSS-Anweisungen sind identisch mit denen für den Rollover-Effekt, aber indem Sie zwei Styles definieren, können Sie die Hervorhebung für »Sie sind hier« und den Effekt beim Hovern bei Bedarf
ganz einfach getrennt gestalten.
Der Trick ist eigentlich nicht schwer, wobei ich in der folgenden Liste den Typ-Selektor davor geschrieben habe, um deutlicher zu machen, wo im Quelltext die IDs definiert wurden:
- Die Kombination body#startseite li#navi01 a existiert nur auf der Startseite.
- Den Selektor body#kontaktseite li#navi02 a gibt es nur auf der Kontaktseite.
Einfach, aber genial. Nach diesen Änderungen sieht der obere Bereich der Webseite so aus:
