Webdesign

Die ausgewählte Seite in einer Navigation hervorheben

Das zweiteilige Tutorial über CSS Menüs zeigt, wie man mit einer HTML Liste und einigen einfachen CSS Regeln eine schöne und funktionale Navigation erstellen kann. Oft möchte man in einer solchen Navigation die aktive Seite optisch hervorheben. Das ist mit CSS leicht umsetzbar — das folgende Tutorial zeigt, wie es geht.

Was wird gemacht?

Am Ende dieses Tutorials werden wir eine Navigationsleiste erstellt haben, die auf vier verschiedene HTML Seiten verlinkt. Wenn wir eine dieser Seiten betrachten, wird sie in der Navigation optisch hervorgehoben sein, so dass der Benutzer sofort erkennt, wo in der Sitestruktur er sich befindet.

So wird das Ganze aussehen.

Die Arbeitsgrundlage

Wie schon in den beiden voran gehenden Tutorials (Menüs mit Rollover Teil 1 und Teil 2) verwenden wir eine einfache ungeordnete HTML Liste als Markup-Grundlage.

Bisher sah das Markup folgendermaßen aus:

  1. <div id="nav">
  2. <ul>
  3. <li><a href="#">Link1</a></li>
  4. <li><a href="#">Link2</a></li>
  5. <li><a href="#">Link3</a></li>
  6. <li><a href="#">Link4</a></li>
  7. </ul>
  8. </div>
  9. Code-Download: /code/tut-aktive-seite-01.txt

Da es uns nun aber um konkrete Seiten geht, ersetzen wir die nichts-sagenden Navigationselemente mit konkreten Titeln und Dateinamen:

  1. <div id="nav">
  2. <ul>
  3. <li><a href="home.htm">Home</a></li>
  4. <li><a href="sonnencreme.htm">Sonnencreme</a></li>
  5. <li><a href="shampoo.htm">Shampoo</a></li>
  6. <li><a href="duschgel.htm">Duschgel</a></li>
  7. </ul>
  8. </div>
  9. Code-Download: /code/tut-aktive-seite-02.txt

Das CSS bleibt zunächst immer gleich und hat sich im Vergleich zu den bisherigen Beispielen nicht geändert.

Das Prinzip der Markierung

Wir werden für die Hervorhebung der aktiven Seite den so genannten „Kontext-Selektor“ von CSS verwenden, der es uns erlaubt, ein Element in einer HTML Datei nur dann per CSS anzusprechen, wenn es sich innerhalb eines ganz bestimmten anderen Elements befindet. Das klingt jetzt etwas kompliziert, ist aber im Prinzip ganz einfach.

Nehmen wir folgende CSS Regel:

  1. p {
  2. font-size: 1em;
  3. }
  4. Code-Download: /code/tut-aktive-seite-04.txt

Sie verwendet einen einfachen Element-Selektor (p) und besagt, dass alle p Elemente eine Schriftgröße von 1em haben sollen.

Oft möchte ich aber nicht alle p Elemente einer HTML Datei ansprechen, sondern nur eine bestimmte Gruppe von ihnen. Z.B. all diejenigen, die sich innerhalb eines div Elements befinden. Dann würde die entsprechende Regel so aussehen:

  1. div p {
  2. font-size: 1em;
  3. }
  4. Code-Download: /code/tut-aktive-seite-05.txt

Hier kommt der so genannte „Kontext-Selektor“ zum Einsatz. Sein Name kommt daher, dass er nur diejenigen p Elemente anspricht, die „im Kontext“ von div Elementen vorkommen, d.h. die sich innerhalb von div Elementen befinden.

Mit Hilfe dieser Auswahlmethode können wir auch die jeweils aktive Seite in der Navigation ansprechen — wir müssen nur einen Weg finden, eindeutige „Kontext“-Beziehungen herzustellen, die wir dann mit entsprechenden CSS-Regeln gestalten können.

Anpassungen im HTML Markup

Konkret müssen wir sowohl das jeweilige HTML Dokument als auch das dazu gehörige Navigationelement eindeutig kennzeichnen. Beides machen wir über das HTML Attribut id. Um die HTML Dokument zu kennzeichnen, geben wir ihnen im body Tag eine id, z.B. <body id="home">. Das entsprechende Navigationselement kennzeichnen wir im li Tag der Navigationsliste, z.B. <li id="navHome">.

Insgesamt sieht dann die neue Navigationsliste folgendermaßen aus:

  1. <div id="nav">
  2. <ul>
  3. <li id="navHome"><a href="home.htm">Home</a></li>
  4. <li id="navSonnencreme"><a href="sonnencreme.htm">Sonnencreme</a></li>
  5. <li id="navShampoo"><a href="shampoo.htm">Shampoo</a></li>
  6. <li id="navDuschgel"><a href="duschgel.htm">Duschgel</a></li>
  7. </ul>
  8. </div>
  9. Code-Download: /code/tut-aktive-seite-03.txt

Und hier noch mal die relevanten Teile des HTML Markups in der Gesamtansicht (hier für das Dokument home.htm):

  1. ...
  2.  
  3. <body id="home">
  4.  
  5. ...
  6.  
  7. <div id="nav">
  8. <ul>
  9. <li id="navHome"><a href="home.htm">Home</a></li>
  10. <li id="navSonnencreme"><a href="sonnencreme.htm">Sonnencreme</a></li>
  11. <li id="navShampoo"><a href="shampoo.htm">Shampoo</a></li>
  12. <li id="navDuschgel"><a href="duschgel.htm">Duschgel</a></li>
  13. </ul>
  14. </div>
  15. </body>
  16. ...
  17. Code-Download: /code/tut-aktive-seite-06.txt

Damit haben wir bereits alle Anforderungen an das Markup erfüllt, um die Navigationselemente entsprechend hervorheben zu können: durch die id Attribute im body und in der Navigationsliste, können wir jedes einzelne Paar aus body und li gezielt per CSS ansprechen. Für das HTML Dokument home.htm sieht der entsprechende Kontext-Selektor so aus:

  1. #home #navHome {
  2. ...
  3. }
  4. Code-Download: /code/tut-aktive-seite-07.txt

Übersetzt bedeutet er: die folgenden CSS Regeln gelten für das Element, welches die id "navHome" hat und sich innerhalb des Elements mit der id "home" befindet. Damit ist genau das erste Listenelement der Navigation ausgewählt — und zwar nur, wenn wir gerade das Dokument home.htm betrachten, denn nur dann ist die id="home" tatsächlich der Kontext für navHome.

Allerdings haben wir in der Navigation die Buttons nicht über das li Element, sondern über das darin enthaltene a Element gestaltet (siehe CSS Menüs mit Rollover). Wir müssen unseren Kontext-Selektor also noch um eine weitere Ebene erweitern (das a innerhalb von li), wenn wir das grafische Erscheinungsbild der Buttons ändern möchten:

  1. #home #navHome a {
  2. ...
  3. }
  4. Code-Download: /code/tut-aktive-seite-08.txt

Nun wählen wir also alle a Elemente aus, die sich in einem Element mit der id "navHome" befinden, welches sich wiederum innerhalb eines Elements mit der id "home" befindet.

Fehlt nur noch die optische Ausgestaltung, in der wir ziemlich frei sind. Hier ein mögliches Beispiel:

  1. #home #navHome a {
  2. background-color: #e4cb00;
  3. border-color: #c9453c;
  4. }
  5. Code-Download: /code/tut-aktive-seite-09.txt

Und so sieht das in der HTML Datei aus. Das ganze funktioniert natürlich auch mit den übrigen Seiten — probieren Sie es aus!

Um das ganze noch abzurunden, ändern wir noch den Mauszeiger, damit er nicht einen anklickbaren Link anzeigt (schließlich soll die aktuelle Seite nicht noch mal angeklickt werden). Das macht folgende Regel:

  1. #home #navHome a {
  2. ...
  3. cursor: default;
  4. }
  5. Code-Download: /code/tut-aktive-seite-12.txt

Anmerkungen

Im vorliegenden Beispiel haben wir die id Attribute den li Elementen der Navigation gegeben. Wir hätten sich genauso gut auch den a Elementen geben können, doch indem wir sie eine Ebene höhere anbringen, gewinnen wir zusätzliche Flexibilität. Wir können dann nämlich sowohl jedes li als auch jedes darin vorkommende a eindeutig ansprechen.

Außerdem sind die CSS Regeln in diesen Beispielen jeweil im head Bereich der HTML Datei notiert. Das ist nur für den Zweck dieses Tutorials sinnvoll. Wenn Sie eine ganze Website mit CSS gestalten, sollten sie alle CSS Regeln in einer separaten CSS Datei notieren und diese in jedem HTML Dokument verlinken:

  1. <link rel="stylesheet" type="text/css" href="gestaltung.css" media="screen, projection" />
  2. Code-Download: /code/tut-aktive-seite-10.txt

Sie können dann auch alle Kontext-Selektoren für die Hervorhebung in der Navigation zusammen fassen:

  1. #home #navHome a,
  2. #sonnencreme #navSonnencreme a,
  3. #shampoo #navShampoo a,
  4. #duschgel #navDuschgel a {
  5. background-color: #e4cb00;
  6. border-color: #c9453c;
  7. cursor: default;
  8. }
  9. Code-Download: /code/tut-aktive-seite-11.txt

Fertig

Mit der vorgestellten Methode lassen sich ohne großen Aufwand einzelne Elemente einer Navigation hervorheben. Im vorliegenden Beispiel wurde das Prinzip auf einzelne HTML Dokumente angewandt, bei größeren Sites lässt es sich aber auch auf ganze Site-Bereiche ausdehnen, so dass z.B. alle HTML Dateien der Sektion „Shopping“ id="shopping" im body Tag haben, während alle HTML Dateien im Bereich „Support“ entsprechend mit id="support" gekennzeichnet sind.

Zum Abschluss noch einmal das fertige Beispiel.

Zuletzt geändert am 11.06.2007

1V.S. schrieb am 11. Juli 2007, 00:38 h    # 

Sehr gutes Beispiel,
wie ist es möglich, einzelne Buttons mit unterschiedlichen Hintergrund-Bildern zu versehen.
Z. B. zu home ein Häuschen und zu Kontakt ein Brief.
Ich hatte gedacht, wenn ich die einzelnen Buttons mit id versehe und die dann anspreche passiert es. Klappt leider nicht. Danke im Voraus für den Tipp, wie ich einzele Buttons ansprechen kann, um die individuelle Rollovers zu ermöglichen
html
<body id=„home“>
<div id=„menu5“> <ul>
<li id=„navHome“><a href=„http://www.berlinertextiletiketten.de/index.htm“ title=„Home“>Home</a></li>
<li id=„navTeam“><a href=“#“ title=„Team“>Team</a></li>
<li id=„navKontakt“><a href=“#“ title=„Kontakt“>Kontakt</a></li>
<li id=„navSitemap“><a href=“# title=„Sitemap“>Sitemap</a></li>
<li id=„navImpressum“><a href=“# title=„impressum“>Impressum</a></li>
</ul> </div>
</body>

CSS

body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 80%; font-weight: bold;
}

ul { list-style: none; margin: 0; padding: 0; }

//———————————-Navigation———————- #menu5 { top:300px; width: 800px; margin: 10px; text-transform: uppercase; }

#menu5 li a { voice-family: „\“}\“„; voice-family: inherit; height: 24px; text-decoration: none; cursor: hand; float:left; color: #ffffff; padding: 8px 0 0 30px; }

#menu5 li a:link, #menu5 li a:visited { background: url(images/menu5.png);

}

#menu5 li a:hover { background: url(images/menu5.png) 0 -32px;

}

#menu5 li a:active { background: url(images/menu5.png) 0 -64px;

}

//_____________________________home

#menu5 li #navHome a:link, #menu5 li #navHome a:visited
{ background: url(images/menu5.png);

}

#menu5 li #navHome a:hover { background: url(images/menu5.png) 0 -32px;

}

#menu5 li #navHome a:active {
background: url(images/menu5.png) 0 -64px;

}

//__________________________________team

#menu5 li #navTeam a:link, #menu li #navHome a:visited
{ color: #ffffff; float:left; background: url(images/team_b.png); padding: 8px 0 0 30px; }

#menu5 li #navTeam a:hover { background: url(images/team_b.png) 0 -32px; padding: 8px 0 0 30px; }

#menu5 li #navTeam a:active { color: #fff; background: url(images/team_b.png) 0 -64px; padding: 8px 0 0 30px;
</html>

2gago schrieb am 15. Juli 2007, 17:34 h    # 

Die automatische Markierung der aktuellen Seite habe ich mit PHP umgesetzt. Falls Interesse besteht, kann es sich jede/r hier anschauen.

3Daniel schrieb am 31. Dezember 2007, 00:19 h    # 

Genial!

Der Trick mit der Unterscheidung der Seiten durch die ID im body-Tag war mir neu, das rundet die Sache mit den CSS-Menüs wirklich ab. Jetzt frage ich mich nur noch, ob es im Rahmen von HTML auch eine Möglichkeit gibt, den HTML-Teil, der ja in jeder Unterseite identisch vorhanden sein muss, auszulagern, um copy & paste zu vermeiden (falls mal noch eine Seite dazukommen soll). Oder geht das wirklich nur auf Serverebene?

4Andreas Kalt schrieb am 31. Dezember 2007, 12:15 h    # 

Daniel, das geht nur auf Serverebene: entweder mit Server-Side Includes (SSI) oder PHP bzw. einer ähnlichen Software, die auf dem Server läuft.

5Kampfzwerg schrieb am 2. Januar 2008, 00:28 h    # 

geht das den auch mit frames ?

ich will das wenn man auf der Startseite ist, der Button auf der auf die Startseite verlinkt dunkel wird (ein passendes .gif hab ich bereits).

# navi # startseitebutton a { src = „ Startseitedunkel.gif „; cursor: default;
}

sowas in der art

6Andreas Kalt schrieb am 2. Januar 2008, 12:22 h    # 

Mit Frames dürfte das nicht gehen, weil je jeder Frame eine eigene HTML Datei ist, die voneinander „nichts wissen“. Du müsstest wahrscheinlich dem Navigationsframe irgendwie „mitteilen“, welche Datei im Inhaltsframe gerade geladen ist.

Außerdem: Frames sind ohnehin keine gute Idee

7Gerrit Bender schrieb am 20. Januar 2008, 13:24 h    # 

Hallo Andreas, erst einmal vielen Dank für das Tutorial, dass ich super verwenden konnte!

Eine Frage stellt sich für mich aber noch, ob ich die ID im BODY-Tag auch an eine andere Stelle „auslagern“ kann.

Mein Problem ist nämlich die Musterseite/Template-Vorlage in Adobe Golive CS3. Der BODY-Tag wird nämlich auf allen Folgeseiten gnadenlos überschrieben, wenn Änderungen an der Musterseite vorgenommen werden. Und den BODY-Tag kann ich innerhalb der Musterseite nicht als editierbaren Bereich definieren.

Vielen Dank!

Gruß Gerrit

8Holger schrieb am 29. Januar 2008, 19:29 h    # 

Hallo Andreas,

Deine Tutorials sind Gold wert:

- Einfach gehalten

- Sehr verständlich

- unbedingt ausbaubar

- und, und, ….

Was dieses Tutorial betrifft:
Ich habe mich nie an diese Kontext-Selektoren rangetraut. Jetzt aber doch.
Und…Wenn das Ganze mit PHP oder einer anderen Scriptsprache kombiniert wird, gibt das ungeahnte Möglichkeiten, fein !!!

Holger

9Andreas, Südtirol schrieb am 7. Februar 2008, 16:46 h    # 

Interessanter Ansatz, ist für HTML-Dateien sicher ein guter und übersichtlicher Weg.

Ich verwende meistens eine .on Klasse, welche ich dann einfach via PHP im Menü dem aktuellen Menüpunkt zuweise.

10Markus schrieb am 2. März 2008, 03:44 h    # 

Bei iFrames funktioniert es ebenfalls nicht, oder?

11Bernhard schrieb am 11. März 2008, 01:01 h    # 

Hallo,
sehr schöne Idee. Nur wenn man nicht die Möglichkeit hat, dem body-tag pro Seite eine andere id zu geben, zB wenn der Teil mit dem body-tag in einer Datei ausgelagert ist und so für alle Seiten verwendet wird, muss man dies ebenfalls über php lösen.

12Penny schrieb am 14. März 2008, 16:22 h    # 

Hallo, eine wirklich gute und hilfreiche Seite! Ich bin darauf gestossen, weil ich auch das problem habe, dass die einzelnen navi-punkte die „li a:active“ Farbe so lange behalten sollen, bis ein anderer menupunkt angeklickt ist. Für einen Verein der Altenarbeit mit angeschlossener Alten-WG mache ich eine neue homepage, diese soll in ca. 4 Wochen freigeschaltet werden. Ich bin als ABM-kraft dort (und selbst auch schon 50plus), und habe vor ca. knapp zehn Jahren html und javascript gelernt und 2 webseiten eigenständig gestaltet, – aber – lange her, d.h. auf die gute alte Weise, im wesentlichen mit Tables, naja, und natürlich mit frames. Aber es hat sich ja wirklich viel getan .. und somit habe ich einen „cms-experten“ an meiner seite – aber örtlich 100 km entfernt (seine recht geringe Bezahlung wird für mich als weiterbildung abgerechnet, was es ja für mich auf jeden Fall auch ist! und so ein verein hat ja auch nicht viel geld).
Wir arbeiten mit contenido – es gibt 2 schriften- (für normale und größere Schriftdarstellung) und 1 boxen-style sowie die startseite, die ich sämtlich „gebaut“ habe, aber die der mir „zur Seite stehende“ cms-experte eingepflegt hat – natürlich hat er mir schon oft geholfen, weil ich kenne das ja noch, dass man zig einzelne Seiten zu bauen hatte und ich musste ganz schön umlernen…
Ich habe administrative Rechte. Meine Fragen:
a) krieg ich das selbst hin (- es geht dabei nur um die Farb-Änderung, d.h. der angeklickte Menupunkt soll dkl-grau bleiben, so lange, wie man sich auf der entsprechenden Seite befindet – aber wieder in das dkl-orange zurück gehen, wenn ein anderer Menüpunkt angeklickt wird!) oder ist das
b) für die angegeben Seite, an der noch ein wenig zu feilen ist und die meisten texte noch eingepflegt werden müssen, gar nicht möglich/machbar?? oder ist das
c) evtl. nur für den cms-experten möglich? Ich stehe mit ihm in laufendem kontakt, d.h. ich könnte ihm lösungsvorschläge weiterleiten.
Falls mir jemand antwortet bzw. einen Tipp oder gar einen Code für mich hat, gebe ich intern gerne – wenn von interesse – die web-adresse weiter; aber da die Seite noch nicht veröffentlicht ist, will ich die Adresse hier nicht veröffentlichen – das wäre evtl. rechtlich problematisch.

Herzliche Grüße Penny

13Andreas Kalt schrieb am 14. März 2008, 22:08 h    # 

@Penny

Das müsste mit einer Kombination aus CMS und CSS gehen. Im CMS müsste auf jeder Seite eine andere ID im Body Tag eingefügt werden (wie das oben beschrieben ist). In der CSS Datei befolgst Du dann das Tutorial.

Übrigens mit a:active hat das nichts zu tun. Das ist eine Pseudo-Klasse für den Moment, in dem ein Link geklickt wird.