Die ausgewählte Seite in einer Navigation hervorheben
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.
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:
<div id="nav"><ul><li><a href="#">Link1</a></li><li><a href="#">Link2</a></li><li><a href="#">Link3</a></li><li><a href="#">Link4</a></li></ul></div>- 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:
<div id="nav"><ul><li><a href="home.htm">Home</a></li><li><a href="sonnencreme.htm">Sonnencreme</a></li><li><a href="shampoo.htm">Shampoo</a></li><li><a href="duschgel.htm">Duschgel</a></li></ul></div>- 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:
p {font-size: 1em;}- 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:
div p {font-size: 1em;}- 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:
<div id="nav"><ul><li id="navHome"><a href="home.htm">Home</a></li><li id="navSonnencreme"><a href="sonnencreme.htm">Sonnencreme</a></li><li id="navShampoo"><a href="shampoo.htm">Shampoo</a></li><li id="navDuschgel"><a href="duschgel.htm">Duschgel</a></li></ul></div>- 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):
...<body id="home">...<div id="nav"><ul><li id="navHome"><a href="home.htm">Home</a></li><li id="navSonnencreme"><a href="sonnencreme.htm">Sonnencreme</a></li><li id="navShampoo"><a href="shampoo.htm">Shampoo</a></li><li id="navDuschgel"><a href="duschgel.htm">Duschgel</a></li></ul></div></body>...- 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:
#home #navHome {...}- 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:
#home #navHome a {...}- 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:
#home #navHome a {background-color: #e4cb00;border-color: #c9453c;}- 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:
#home #navHome a {...cursor: default;}- 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:
<link rel="stylesheet" type="text/css" href="gestaltung.css" media="screen, projection" />- 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:
#home #navHome a,#sonnencreme #navSonnencreme a,#shampoo #navShampoo a,#duschgel #navDuschgel a {background-color: #e4cb00;border-color: #c9453c;cursor: default;}- 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.
Die automatische Markierung der aktuellen Seite habe ich mit PHP umgesetzt. Falls Interesse besteht, kann es sich jede/r hier anschauen.
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?
Daniel, das geht nur auf Serverebene: entweder mit Server-Side Includes (SSI) oder PHP bzw. einer ähnlichen Software, die auf dem Server läuft.
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
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
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
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
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.
Bei iFrames funktioniert es ebenfalls nicht, oder?
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.
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
@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.
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>