[CSS] Wie kann ich die aktuell geöffnete Seite im Navigationsmenü hervorheben?

Maik · 20. Juni 2010

Wie kann ich die aktuell geöffnete Seite im Navigationsmenü hervorheben?

Die Ausgangssituation: Um dem Besucher beim Navigieren durch das Webprojekt eine Orientierungshilfe zu bieten, wo er sich aktuell befindet, soll der gewählte Menüpunkt von den übrigen Verweisen optisch abgehoben werden.

Die Vorschaugrafik illustriert das Vorhaben anhand der drei Projektseiten "Home", "News" und "Contact":

Recht viele Benutzer, die sich in der Vergangenheit zu dieser Aufgabenstellung an das CSS-Forum gewendet haben, betonten in ihrer Problemerläuterung, hierfür die Pseudoklasse :active genutzt zu haben, und daher nicht verstehen, warum der Browser hier dem CSS nicht wie gewünscht folgt.

Der Name sorgt da wohl für Irritationen, denn diese Pseudoklasse gilt ausschließlich für gerade angeklickte Elemente, d.h. wenn der Nutzer die Maustaste loslässt, verliert :active die Gültigkeit, und die angewandte CSS-Formatierung wird vom Browser wieder zurückgesetzt.

Doch wie ist es dann möglich, diese Formatierung umzusetzen?

Grundsätzlich bedient man sich eines Klassen- oder ID-Bezeichners, der der Spezifizierung des relevanten Elements innerhalb der Menü-/Quellcode-Struktur dient, um im Stylesheet einen entsprechenden Selektor für Nachfahren definieren zu können, der für dieses Element zutrifft.

Ich stelle hier zwei Methoden vor, die sich lediglich darin unterscheiden, welche HTML-Elemente im Quellcode einen Bezeichner erhalten.

Für das dokumentspezifische <li>-Element wird ein ID-Bezeichner deklariert

Mit dieser Technik "wandert" das id-Attribut in den HTML-Dokumenten durch die Listen-Navigation, um darin den aktuellen Menüpunkt mit dem ID-Bezeichner #current auszuzeichnen.

Für den Menüpunkt der aktuell geöffneten Seite lautet im Stylesheet der Selektor somit "ul#nav li#current a {}".
- HTML-Snippet der drei Dokumente
  - index.htm:

HTML:

    <body>
        <ul id="nav">
            <li id="current"><a href="index.htm">Home</a></li>
            <li><a href="news.htm">News</a></li>
            <li><a href="contact.htm">Contact</a></li>
        </ul>
    </body>

news.htm:

HTML:

    <body>
        <ul id="nav">
            <li><a href="index.htm">Home</a></li>
            <li id="current"><a href="news.htm">News</a></li>
            <li><a href="contact.htm">Contact</a></li>
        </ul>
    </body>

contact.htm:

HTML:

    <body>
        <ul id="nav">
            <li><a href="index.htm">Home</a></li>
            <li><a href="news.htm">News</a></li>
            <li id="current"><a href="contact.htm">Contact</a></li>
        </ul>
    </body>

CSS-Snippet
- CSS-Regeln zur Formatierung der Verweise:

CSS:

ul#nav li a:link,
ul#nav li a:visited {
background:#b5bfca;
color:#1e72c8;
}
ul#nav li a:hover,
ul#nav li a:active,
ul#nav li#current a:link,
ul#nav li#current a:visited {
background:#1e72c8;
color:#fff;
}

Gehe zum Anfang

Für das <body>-Element und die <a>-Elemente werden ID-Bezeichner deklariert

Diese Methode sieht zum einen im <body>-Element der einzelnen HTML-Dokumente einen eindeutigen ID-Bezeichner vor, der sich sinngemäß aus der jeweiligen Seitenfunktion ableiten lässt, z.B. #home für die Startseite.

Zum anderen werden die Verweise jeweils mit einem eindeutigen ID-Bezeichner ausgezeichnet, der beispielsweise den Genannten im <body>-Element mit dem Zusatz "Nav" ergänzt - also #homeNav für die Startseite.

Für dieses ID-Pärchen der Startseite lautet im Stylesheet der Selektor "body#home a#homeNav {}" oder in der ausführlicheren (spezifischeren) Fassung "body#home ul#nav a#homeNav {}".
- HTML-Snippet der drei Dokumente
  - index.htm:

HTML:

    <body id="home">
        <ul id="nav">
            <li><a id="homeNav" href="index.htm">Home</a></li>
            <li><a id="newsNav" href="news.htm">News</a></li>
            <li><a id="contactNav" href="contact.htm">Contact</a></li>
        </ul>
    </body>

news.htm:

HTML:

    <body id="news">
        <ul id="nav">
            <li><a id="homeNav" href="index.htm">Home</a></li>
            <li><a id="newsNav" href="news.htm">News</a></li>
            <li><a id="contactNav" href="contact.htm">Contact</a></li>
        </ul>
    </body>

contact.htm:

HTML:

    <body id="contact">
        <ul id="nav">
            <li><a id="homeNav" href="index.htm">Home</a></li>
            <li><a id="newsNav" href="news.htm">News</a></li>
            <li><a id="contactNav" href="contact.htm">Contact</a></li>
        </ul>
    </body>

CSS-Snippet
- CSS-Regeln zur Formatierung der Verweise:

CSS:

ul#nav li a:link,
ul#nav li a:visited {
background:#b5bfca;
color:#1e72c8;
}
ul#nav li a:hover,
ul#nav li a:active,
body#home ul#nav li a#homeNav,
body#news ul#nav li a#newsNav,
body#contact ul#nav li a#contactNav {
background:#1e72c8;
color:#fff;
}

Gehe zum Anfang

Die kompletten Beispiele der beiden vorgestellten Techniken hänge ich als ZIP-Archiv an.

mfg Maik

[CSS] Wie kann ich die aktuell geöffnete Seite im Navigationsmenü hervorheben?

Maik

Anhänge

Neue Beiträge