Aktuellen Link mit CSS hervorheben

13 Kommentare

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.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter:

13 Kommentare

  3. Aktuellen Link mit CSS hervorheben
    Das Gros der Websites hat eines gemeinsam: sie haben mehr oder weniger die gleiche Navigation; sprich eine Liste mit Navigationsitems. Über diese gelangt der geschätzte Besucher dann zu den entsprechenden Seiten, wo er aber mitunter gar nicht mehr so g…

  4. 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. 😉

  6. @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.

  8. Na dann ergänzend dazu noch ein Link auf mein PHP Menü welches nicht auf sich verweist. Ich glaube aber dass wir über die möglichkeit den Aktuellen Link dadurch kennzuzeichnen, dass er kein Link ist schon hier diskutiert haben 😀

  9. 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 ...

  10. 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 …

  11. 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 😉

  12. 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 ^^

  13. […] Ich habe mir schon länger darüber Gedanken gemacht, wie man dies automatisieren könnte. Schon relativ früh war mir klar, daß eine der Möglichkeiten es wäre den Titel (wp_titel) der jeweiligen Unterseite auszulesen, aufzubereiten (z.B. die Leerzeichen entfernen) und im Bodytag und innerhalb der Navigation als zusätzliche ID einzufügen. Das Prinzip habe ich schonmal unter dem Stichwort Aktuellen Link mit CSS hervorheben beschrieben. […]

Kommentare sind geschlossen.