Informatik :: JavaScript :: Pulldown-Menüs
Am einfachsten ist sicherlich ein Pulldown-Menü unter Verwendung einer Auswahlliste.
Im Beispiel sehen wir innerhalb eines Formulares (nennen wir es liste) ein Pulldown-Menü (nennen wir es wahl) mit 4 Einträgen.
Der oberste Eintrag ("Bitte wählen!") dient nur der Aufforderung, einen Eintrag zu selektieren. Er hat keinen internen Wert (value).
Die anderen 3 Einträge referenzieren jeweils eine Seite. Sie haben als internen Wert jeweils den URL der referenzierten Seite (z.B. "maina.html").
Die Funktionalität wird durch eine Funktion (nennen wir sie wechsel()) erreicht, die beim Wechsel der Auswahl durch den Eventhandler onChange aufgerufen wird.
Was muss diese Funktion leisten?
Zunächst muss der Index des ausgewählten Eintrages ermittelt werden.
Dies geschieht durch auswahl = document.liste.wahl.selectedIndex (Siehe Objektreferenz des option-Objektes)
Dann muss der interne Wert (value) dieses Eintrages gelesen werden.
Dies geschieht durch seite = document.liste.wahl.options[auswahl].value
Wie du siehst, ist options ein Array, dessen Elemente (die einzelnen Eintäge) mit einem Index (ab 0) angesprochen werden können.
Zum Schluss wird die Seite mit dem gelesenen internen Wert geöffnet durch parent.location.href = seite.
Das Pulldown-Menü mittels Auswahlliste ist zwar zweckerfüllend, lässt aber gestalterisch einige Wünsche offen.
Erinnern wir uns, dass wir mittels CSS hervorragend formatieren können.
Im Beispiel werden zunächst unsichtbare Container durch Klick auf einen Button sichtbar gemacht.
Die Container enthalten jeweils eine Tabelle aus einer Spalte und mehreren Zeilen. In jeder Zeile steht ein Verweis.
Die Gestaltung und Positionierung der Container kann problemlos mit CSS vorgenommen werden.
Die Sichtbarkeit (visibility) aller Container wird zunächst auch mittels CSS auf versteckt (hidden) gesetzt.
Beim Klick auf einen "Menü-Button" wird eine Funktion - nennen wir sie oeffne(i) - aufgerufen, wobei i der Index des zu öffnenden Menüs ist.
Diese Funktion soll folgendes realisieren:
Für den Index des geöffneten Menüs führen wir eine Variable ein (nennen wir sie open), die den Anfangswert 0 erhält.
Für den Index eines Menüs verwenden wir das DOM (Document Object Model) des Browsers.
Nach diesem Modell kann man alle HTML-Elemente (also auch Container) als Unterobjekte des document-Objektes über
document.getElementsByName("ElementName") oder
über Javascript ansprechen. Weitere Informationen findest du hier.
Wir verwenden für unser Beispiel die letzte Variante.
So kann man z.B. die Sichtbarkeit des 2. Container mit
document.getElementsByTagName("div")[1].style.visibility = "visible" auf sichtbar bzw.
die Sichtbarkeit des 3. Containers mit
document.getElementsByTagName("div")[2].style.visibility = "hidden" auf unsichtbar setzen.
Als letztes muss die Funktion oeffne(i) die Variable open auf i setzen, demit beim nächsten Aufruf des geöffnete Menü wieder geschlossen werden kann.
Extrahiere alle Dateien des ZIP-Archives explorer.zip in einen separaten Ordner und
öffne die Datei index.html in einem Browser!
Wie du siehst, wird hier die Pulldown-Wirkung durch das erneute Schreiben der gesamten Tabelle durch die Methode document.write() erreicht.
Versuche die Dateien index.html und explorer.html derart zu ändern, damit die folgende Lösung erzielt wird.
Dazu benötigst du auch die folgenden 6 Grafiken als Schaltflächen:
thA.gif, thAover.gif, thB.gif, thBover.gif, thC.gif, thCover.gif
