Aufklappbare Navigationsmenüs
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Ein Teil der Links soll versteckt und nur bei Bedarf angezeigt werden. Anstatt zwei Linklisten anzuzeigen, wird die zweite Liste versteckt (siehe nächste Abbildung) und nur dargestellt, wenn der Benutzer auf ein Pluszeichen (+) klickt, wie in der übernächsten Abbildung zu sehen ist.
Abbildung: Die zweite Linkliste ist verborgen.
Abbildung: Wenn der Link in der Überschrift angeklickt wurde, wird die zweite Liste angezeigt.
Lösung
Zu Beginn versehen Sie die HTML-Links, die verborgen werden sollen, mit einem id-Attribut im ul-Element:
<h5>Interessante Links (+/-)</h5>
<ul id="menulink">
<li><a href="http://www.ora.com/">O'Reilly</a></li>
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.microsoft.com/">Microsoft</a></li>
<li><a href="http://www.mozilla.org/">Mozilla</a></li>
</ul>
Danach legen Sie eine CSS-Regel an, die verhindert, dass die Liste beim Laden der Seite angezeigt wird:
#menulink {
display: none;
}
Mit folgender JavaScript-Funktion kann zwischen den display-Werten block und none hin- und hergewechselt werden:
function kadabra(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display = "block";
}
return false;
} else {
return true;
}
}
Umgeben Sie die Überschrift mit einem a-Element, das den JavaScript-Event onclick enthält. Klickt ein Benutzer auf diesen Link, wird die dazugehörige JavaScript-Funktion ausgeführt:
<h5><a href="#" onclick="return kadabra('menulink');">Interessante Links (+/-)</a></h5>
Diskussion
Im JavaScript-Code wird mit Hilfe der Funktion getElementbyId die Darstellungsrolle der Linkliste verändert. Ohne weiteren JavaScript-Code kann diese Technik so angepasst werden, dass auch mehrere Menüs oder andere Teile des Webdokuments angezeigt oder versteckt werden können:
<p>Wollen Sie wirklich die Wahrheit erfahren? Wenn ja, dann klicken Sie <a href="#" onclick="return kadabra('spoiler'); ">diesen Link</a> an.</p>
<p id="spoiler">Darth Vader war der Vater von Luke!</p>
Diese Technik funktioniert mit Netscape Navigator 6+, Opera 7.5+, Internet Explorer für Windows 5+ und Safari.
Siehe auch
MDN Mozilla Developer Network für weiterführende Informationen zur Funktion getElementbyId.
<< 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