WordPress & Webwork

Aktuellen Link mit CSS hervorheben

Geordnete und ungeordnete Listen sind mittlerweile sehr beliebt geworden um eine Navigation zu realisieren. Dies ist (meistens) semantisch richtig und mittels CSS bieten sich vielfältige Getsaltungsmöglichkeiten. Siehe dazu: Navigationsmenüs mit Listen.

Um dem Besucher die Orientierung innerhalb der Website zu erleichtern bietet es sich an, die aktuelle Position innerhalb des Navigationsmenüs hervorzuheben.

Hier ein Beispiel:

Aktueller Link mit CSS

Der Besucher sieht nun, er befindet sich auf der Unterseite auf der die Projekte vorgestellt werden. und das hilft seiner Orientierung.

Und wie erreicht man diesen Effekt? Es gibt viele Möglichkeiten, entweder man macht es manuell, durch diverse Skriptsprachen (Javascript, PHP, ASP etc.) oder durch CSS. Ja, das geht. Glaube es mir einfach :roll:.

Schauen wir uns zuerstmal wie ein Quelltext diesbezüglich aussehen könnte:

<ul id="navi">
<li><a href="/">Home</a></li>
<li><a href="/grundsatz">Grundsätzliches</a></li>
<li><a href="/leistung">Leistungen</a></li>
<li id="aktiv"><a href="/projekte">Projekte</a></li>
<li><a href="/vorlagen">Vorlagen</a></li>
<li><a href="/agb.php">AGB</a></li>
<li><a href="/impressum">Impressum</a></li>
</ul>

Und die dazugehörigen CSS-Angaben würde dann ungefähr so aussehen:

#navi {
CSS-Angaben
}
#navi ul li {
CSS-Angaben
}
#navi #aktiv {
CSS-Angaben um hervorzuheben
}

So würde das alles aussehen wenn du es entweder manuell machen willt, aber je nach Umfang der Website ist es dann doch umständlich. Und wie schon versprochen wollen wir das alles über CSS lösen, damit die Arbeit etwas erleichtert wird.

Verschiedene IDs für body

Das Geheimnis der CSS-Lösung liegt darin jeder Unterseite im Body ein neue ID zuzuweisen z. B. <body id="projekte">. Doch das ist nicht alles. Man muss jedem Verweis in der Navigation auch eine separate ID zuweisen:

<ul id="navi">
<li id="startnavi">
<a href="/">Home</a>
</li>
<li id="grundsatznavi">
<a href="/grundsatz">Grunds.</a>
</li>
<li id="leistungnavi">
<a href="/leistung">Leistungen</a>
</li>
<li id="projektenavi">
<a href="/projekte">Projekte</a>
</li>
<li id="vorlagennavi">
<a href="/vorlagen">Vorlagen</a>
</li>
<li id="agbnavi">
<a href="/agb.php">AGB</a>
</li>
<li id="impressumnavi">
<a href="/impressum">Impressum</a>
</li>
</ul>

Die CSS-Datei würde dann folgende Angaben bekommen:

#navi {
CSS-Angaben
}
#navi ul li {
CSS-Angaben
}
body#start li#startnavi, 
body#grundsatz li#grundsatznavi, 
… 
body#impressum li#impressumnavi {
CSS-Angaben um hervorzuheben
}

Und was passiert nun? Nehmen wir mal an, du befindest dich auf der Projekt-Unterseite. Hier hat Body die ID=projekte und somit würde die CSS-Anweisung greifen und den aktuellen Navigationspunkt hervorheben. Denn auf dieser Unterseite befinden sich <body id="projekte"> und <li id="projektemnavi"> im gleichen Dokument.

Nun kann man auch den Navigationsabschnitt herausnehmen und in einer separaten Datei abspeichern und z. B. per PHP oder SSI jeder Unterseite einfügen bzw. includen.

Quelle: Hicksdesign.co.uk.

13 Reaktion(en)

  1. Pingback: C-blog - Bock auf Blog » Hover-Effekt mit CSS

  2. Pingback: Der Themenmixer

  3. Manuel

    genau das prinzip mit der body id hab ich letztens in nem projekt eingesetzt. dazu wollte ich demnächst auch ne ausführliche anleitung schreiben. in dem projekt hab ich jeder unterseite eine eigene fortlaufende body id gegeben, und dann jeden aktiven menüpunkt und unterpunkt per body id angesprochen.
    sehr einfach und praktisch ist es bei der technik, in der navigation eine variable mit zu übergeben die per php ausgelesen und in den body geschrieben wird. so kann man mit einem template fast ne ganze seite steuern.

    sähe dann so aus:
    <a href="index.php?id=28">Impressum</a>

    in der index.php dann:

    <body id="<? echo "$id"; ?>">
    Navigation, etc…

    <div id="content">
    <?
    switch($id) {
    (...)
    case 28:
    include("impressum.php");
    break;
    }
    (...)
    ?>
    </div>

    ist jetzt natürlich sehr sehr stark vereinfacht, aber ich werd mir versuchen den link zu merken und sobald ich mein tutorial dazu fertig habe per trackback anpingen. ;)

  4. Perun

    @Manuel,
    ist OK, vergesse ich auch manchmal. Habe mir die Freiheit genommen und habe in deinem Kommentar die Sonderzeichen maskiert und bei Code-Beispielen <code> hinzugefügt.

  5. René

    nur so am Rande:

    >>Geordnete und ungeordnete Listen<<

    was ist schon geordnet? Ich finde die Begriffe nummerierte Liste und Aufzählungsliste aussagekräftiger …

    zum eigentlichen: ich sehe den Vorteil deiner Variante nicht. Im herkömmlichen (oberen) Fall mache ich im Code nix anderes als eine:

    if (aktuelleSeite == dieser Link)
    besondere Klasse
    else
    normal

    im unteren Falle müßte ich zudem noch die CSS-Datei dynamisch machen – und davor scheue ich mich etwas …

  6. René

    nur so am Rande:

    "Geordnete und ungeordnete Listen´´

    was ist schon geordnet? Ich finde die Begriffe nummerierte Liste und Aufzählungsliste aussagekräftiger …

    zum eigentlichen: ich sehe den Vorteil deiner Variante nicht. Im herkömmlichen (oberen) Fall mache ich im Code nix anderes als eine:

    if (aktuelleSeite == dieser Link)
    besondere Klasse
    else
    normal

    im unteren Falle müßte ich zudem noch die CSS-Datei dynamisch machen – und davor scheue ich mich etwas …

    WordPress hat immer noch diesen Bug bei eckigen Klammern …

  7. Perun

    Hi Rene,

    ich sehe den Vorteil deiner Variante nicht […]

    und was machst du wenn du auf dem Server kein PHP & Co. zur Verfügung hast? Ich habe mir mal sagen lassen, daß man dann mit if else nicht weit kommt ;-)

  8. Martin

    Man könnte auch, wenn man nicht alle Links per Skript durchgehen will, um Klassen zu setzen, CSS3-Selektoren nehmen, z. B. so:
    <style type="text/css">
    a[href=/foo/bar.baz] { /* Formatierungen hier */ }
    </style>

    /foo/bar.baz wäre die aktuelle Seite, man müsste nur diesen Teil im <head> ausgeben. Eine Zeile PHP reicht da ^^

  9. Pingback: Kontextsensitive Navigation in WP » Peruns Blog - Webwork und Internet

Die Kommentare in diesem Beitrag sind geschlossen.