 Pulldownmenü - Einführung
Ein Pull-Down-Menü ist ein mit der Maus anwählbares Menü. Beim Anklicken wird eine Liste von Menüeinträgen aufgeklappt. Zusammengeklappt ist nur der aktuell ausgewählte Eintrag sichtbar. Das Pull-Down-Menü ist ein Element von Formularen. Eine andere Bezeichnung ist "Drop-Down-Menü".
Abhängig davon, welche Anweisungen sich hinter der Oberfläche verbergen, wird eine Aktion entweder gleich nach der Änderung eingeleitet oder durch einen (zusätzlichen) Button-Klick erst bestätigt.
Ein Pulldownmenü ist Bestandteil eines Formulars.
Folgende HTML-Tags werden eingesetzt:
- <form>
- <select>
- <opton>
- <input type="button">
|
(mit "zürück" gelangen sie wieder hierher)
|
Nach der Auswahl einer Option wird in der Regel ein Wert ermittelt, den man dann für weitere Aktionen (auch in einer JavaScript-Funktion) verwenden kann. Abhängig vom Einsatzbereich des Menüs kann man:
- Dateien aufrufen
- PopUp-Windows öffnen
- Hintergrundfarben wechseln
- Emails / Formulardaten versenden
- Grafiken anzeigen / austauschen
- ...
Grundstruktur
Das Formular wird mit <FORM> eingeleitet
Der Selektionsbereich wird mit <SELECT> eingeleitet
Die Optionen der Auswahl werden in <OPTION>-Tags eingebunden.
Es kann zusätzlich ein Button eingebunden sein
<form>
<select>
<option value="datei01.htm"> Frühling </option>
<option value="datei02.htm"> Sommer </option>
<option value="datei03.htm"> Herbst </option>
<option value="datei03.htm"> Winter </option>
</select>
<input type="button" value="GO" onClick=ausführen was hier steht">
</form>
Der erweiterte Code
Beachten sie: In diesem Beispiel wurden für Formular und Select Namen vergeben!
Hier hat Jupp Zupp wieder einmal zugeschlagen und für die Nameseinträge im Formular
wenig aussagekräftige aber leicht zuzuordnende Bezeichner gewählt. Daher die
unsinnigen Einträge 'AAAAA' und 'BBBBB'. Weshalb? Wegen der Übersichtlichkeit.
Das oben stehende Pulldown-Menü wird mit diesem Code erzeugt:
<form name="AAAAA">
<select name="BBBBB">
<option selected value="linkseite.htm"> Option 01 </option>
<option value="bsp-datei01.htm"> Frühling </option>
<option value="bsp-datei02.htm"> Sommer </option>
<option value="bsp-datei03.htm"> Herbst </option>
<option value="bsp-datei04.htm"> Winte </option>
</select>
<input type="button" value="GO" onClick=ausführen was hier steht">
</form>
Erklärung:
Der Browser speichert beim Einlesen der HTML-Seite die Optionen in einem Array (Register). Nach der Auswahl und einem Klick auf "GO" wird fer Wert aus dem Array des Formulars entnommen.
Auszug aus dem Quellcode:
<form name="AAAAA">
<select name="BBBBB">
<option value="bsp-datei01.htm"> Frühling </option>
<option value="bsp-datei02.htm"> Sommer </option>
...
<input type="button" value="Go" onClick=
"document.location=document.AAAAA.BBBBB.
options[document.AAAAA.BBBBB.selectedIndex].value">
Was geschieht dann nach dem Klick auf 'GO'?
Die Quelle für das anzuzeigende HTML-Dokument für diesen Ort (location) ist zu ermitteln
1) aus diesem Formular mit dem Namen 'AAAAA'
2) aus der Auswahl der Optionen mit dem Namen 'BBBBB'
3) dem übergebenen Wert (value)
4) für die gewählte Option
Für die erste Option ist das Ergebnis dann: "bsp-datei01.htm"
Der ermittelte Wert "bsp-datei01.htm" ist dann die Datenquelle für die Anzeige.
| 
HOME
ZURÜCK