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.

Zweite Linkliste ist verborgen

Abbildung: Die zweite Linkliste ist verborgen.

Wenn Link in Überschrift angeklickt wurde, wird zweite Liste angezeigt

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