Javaskript-Workshop

Beispiel: Pulldown-Menü

Will man eine übersichtliche und praktische Navigation auf der Homepage ermöglichen kommt man um eine Pulldown-Menü kaum herum. Man kann ihr aus einer Auswahlbox auswählen und wird nach der Auswahl sofort auf die entsprechende Seite weitergeleitet.

<script language="JavaScript">
<!--
Der Funktion weiterleitung wird die URL übergeben. Dieser Wert stammt aus dem aktivierten Dropdown-Menü und wird durch den Event-Handler "onChange" übergeben, diese reagiert sobald sich etwas an der Auswahlbox ändert.

function weiterleitung(url)
{
if(url == "")
Hier wird abgefragt ob die URL leer ist und ob es sich bei der Auswahl um eine Unterteilung in Rubriken handelt. Ist dies der Fall wird das Formular zurückgesetzt und der aktive Bereich wird verlassen. Die Auswahlbox wird über das Objekt documents und das Unterobjekt forms angesprochen. Dabei geht man bei der internen Zählung von 0 aus. (Das 1.Formular im Dokument).
{
document.forms[0].reset();
document.forms[0].elements[0].blur();
return;
}
else
Ist url eine richtige Internet-Adresse leitet das Skript auf diese URL um. Dies geschieht mit top.location.href, dabei wird auf das Objekt location zurückgegriffen und es wird auf die URL (url), die der Funktion übergeben wurde, ontop (nicht im Frame) weitergeleitet.
{
top.location.href = url;
document.forms[0].reset();
document.forms[0].elements[0].blur();
}
}
//-->
</script>

HTML-Einbau
<form>
<select size=1 name="Auswahl"
onChange="weiterleitung(this.form.Auswahl.options
[this.form.Auswahl.options.selectedIndex].value)">
<option value="" SELECTED>Auswahl-Menü</option>
<option value="datei.htm">Seite 1</option>
<option value="datei.htm">Seite 2</option>
<option value="datei.htm">Seite 3</option>
<option value="">--Unterteilung 1--</option>
<option value="datei.htm">Seite 4</option>
<option value="datei.htm">Seite 5</option>
</select></form>

Zurück l Übersicht l Objektreferenz l Weiter