ERLEDIGT
NEIN
ANTWORTEN
0
ZUGRIFFE
10025
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
  1. 20.06.10 02:02 #1
    Maik Tutorials.de Gastzugang
    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":

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


    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.

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

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



    1. 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-Code:
              <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-Code:
              <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-Code:
              <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:
          Code css:
          1
2
3
4
5
6
7
8
9
10
11
12

          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



    2. 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-Code:
              <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-Code:
              <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-Code:
              <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:
          Code css:
          1
2
3
4
5
6
7
8
9
10
11
12
13

          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
    Angehängte Dateien Angehängte Dateien
     
Thema nicht erledigt
« [CSS] Wie lässt sich der Footer am unteren Fensterrand ausrichten? | Faq »

Ähnliche Themen

  1. Gerade besuchte Seite hervorheben
    Von AnjaR im Forum CSS
    Antworten: 4
    Letzter Beitrag: 16.06.10, 11:13
  2. Aktuelle Seite farblich hervorheben?
    Von mareikiii im Forum PHP
    Antworten: 1
    Letzter Beitrag: 23.10.08, 18:05
  3. Aktuelle Seite hervorheben
    Von xollo im Forum PHP
    Antworten: 3
    Letzter Beitrag: 24.07.07, 07:33
  4. besucher (aktuell auf der seite)
    Von pulmoll im Forum Flash Plattform
    Antworten: 4
    Letzter Beitrag: 30.12.03, 10:52
  5. Navigationsmenü soll anderer CSS Stil als rest der Seite erhalten
    Von Der nette Mann im Forum CSS
    Antworten: 8
    Letzter Beitrag: 05.03.03, 16:49