Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

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
  1. 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;
    }

  2. 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:

Abbildung 9.6: Navigation mit Tabs, aktueller Menüpunkt hervorgehoben
Abbildung 9.6: Navigation mit Tabs, aktueller Menüpunkt hervorgehoben
Sie sind hier: Hervorhebung per CSS-Klasse

Bei wenigen Seiten ist die Hervorhebung mit verschachtelten Selektoren okay, aber wenn die Anzahl der Seiten wächst, wird die Liste mit den Selektoren doch zu groß. Einfacher ist es dann, dem aktiven Menüpunkt im HTML eine Klasse zu geben, und diese Klasse dann im CSS zu gestalten. 

Im HTML: <a href="index.html" class="sie-sind-hier">Startseite</a>

Im CSS: .sie-sind-hier { ... }