perun.net – WordPress & Webwork



Aktuellen Link mit CSS hervorheben

Von am 23. 11. 2004 um 11:02 – Aktualisiert am 11. 07. 2013 um 13:11

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.

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
Artikel, HTML & CSS
Tags:
 
Beitrag:
Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 


13 Kommentare

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

    Pingback vom 27.11.2004 um 07:24

    [...] dard XHTML 1.1 (Strict) wechseln. Vlad aka Perun hat in den vergangenen Tagen zwei Artikel "Aktuellen Link mit CSS hervorheben" und "Navigation [...]

  2. 2.Jörg

    Kommentar vom 23.11.2004 um 11:38

    Wirklich nette Idee …. und ich denke, ich habe auch schon ne Anwendung dafür. Danke!

  3. 3.Der Themenmixer

    Trackback vom 23.11.2004 um 11:41

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

    Kommentar vom 23.11.2004 um 12:00

    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. ;)

  5. 5.Manuel

    Kommentar vom 23.11.2004 um 12:01

    aaaah hilfe. ich hab ganz vergessen das die ganzen klammern < > maskiert werden müssen :( :( :(

  6. 6.Perun

    Kommentar vom 23.11.2004 um 12:08

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

  7. 7.Manuel

    Kommentar vom 23.11.2004 um 12:36

    ok danke. dann hab ich mir ja doch nicht umsonst nen wolf getippt ;)

  8. 8. – Jeena Paradies

    Kommentar vom 23.11.2004 um 18:50

    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 :grin:

  9. 9.René

    Kommentar vom 23.11.2004 um 23:01

    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. 10.René

    Kommentar vom 23.11.2004 um 23:02

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

    Kommentar vom 24.11.2004 um 08:54

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

    Kommentar vom 28.11.2004 um 21:40

    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. 13.Kontextsensitive Navigation in WP » Peruns Blog - Webwork und Internet

    Pingback vom 16.07.2005 um 20:28

    [...] 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. [...]

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.