Kontextmenüs
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Ein mit dem Rezept Textbasierte Navigationsmenüs und Rollover-Effekte kombinieren erzeugtes Navigationsmenü (siehe folgende Abbildung) soll so verändert werden, dass die gegenwärtige Seite im Menü hervorgehoben wird.
Abbildung: Die Navigationsliste ohne Hervorhebung der aktuellen Seite.
Lösung
Versehen Sie das body-Element mit einem id-Attribut:
<body id="pagespk">Zusätzlich versehen Sie auch die Anker-Elemente mit eigenen id-Attributen:
<div id="navsite">
<h5>Navigationsmenü:</h5>
<ul>
<li><a href="/" id="linkhom">Startseite</a></li>
<li><a href="/about/" id="linkabt">Über uns</a></li>
<li><a href="/archives/" id="linkarh">Archive</a></li>
<li><a href="/writing/" id="linkwri">Schreiben</a></li>
<li><a href="/speaking/" id="linkspk">Sprechen</a></li>
<li><a href="/contact/" id="linkcnt">Kontakt</a></li>
</ul>
</div>Um das Menü fertigzustellen, kombinieren Sie zwei ID-Selektoren zu einem Selektor für Nachkommen-Elemente (siehe nächste Abbildung):
#pagespk a#linkspk {
border-left: 10px solid #f33;
border-right: 1px solid #f66;
border-bottom: 1px solid #f33;
background-color: #fcc;
color: #333;
}
Abbildung: Der Link für die aktuelle Seite unterscheidet sich von den übrigen Links.
Diskussion
Bei einer kleinen Website lässt sich die aktuelle Seite hervorheben, indem ihr Link aus dem HTML-Code entfernt wird:
<div id="navsite">
<h5>Navigationsmenü:</h5>
<ul>
<li><a href="/"Startseite</a></li>
<li><a href="/about/">Über uns</a></li>
<li><a href="/archives/">Archive</a></li>
<li><a href="/writing/">Schreiben</a></li>
<li>Sprechen</li>
<li><a href="/contact/">Kontakt</a></li>
</ul>
</div>Bei größeren Sites, die eventuell noch Untermenüs enthalten, erhöht das manuelle Entfernen der Link-Tags auf jeder Seite die Produktions- und Wartungszeiten. Durch ein angemessenes Markup lassen sich die Links aber beispielsweise auch per Server Side Include laden. Bei Bedarf können Sie die CSS-Regeln für die Navigationslinks entsprechend anpassen.
Sie können die CSS-Regeln auch zusammenfassen, damit alle Links im Navigationsmenü auf einmal angesprochen werden können. Hierfür verbinden Sie die einzelnen Selektoren für Nachkommen durch Kommata und jeweils mindestens ein Leerzeichen:
#pagehom a#linkhom:link,
#pageabt a#linkabt:link,
#pagearh a#linkarh:link,
#pagewri a#linkwri:link,
#pagespk a#linkspk:link,
#pagecnt a#linkcnt:link {
border-left: 10px solid #f33;
border-right: 1px solid #f66;
border-bottom: 1px solid #f33;
background-color: #fcc;
color: #333;
}In den einzelnen Webdokumenten müssen Sie sicherstellen, dass das body-Element auch das korrekte id-Attribut trägt. So hat das body-Element für die Startseite die Form <body id="pagehom">.
Siehe auch
Die CSS 2.1-Spezifikation zum Thema Selektoren für Nachkommen.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln