Dropdown-Menü mit Link

Mit ein wenig JavaScript wird aus dem Dropdown Formularelement ein Menü

Mit einem Dropdown Menü kann man schnell eine kleine, platzsparende
Navigation für die eigene Seite erstellen. Es gibt zwei Varianten.


Mit Button

<form>
<select name="list" size="1">
<option selected value="https://www.devmag.net">
devmag.net </option>
<option value="http://www.exine.de"> Exine </option>
<option value="http://www.drweb.de"> Dr. Web </option>
</select><input TYPE="button" VALUE="und
los"
onClick="top.location.href=
this.form.list.options[this.form.list.selectedIndex].value">

</form>

Es wird jeweils der aktuell ausgewählte Index ermittelt, und
bei Klicken auf den Button wird dieser URL dann ausgewählt.

<option value="URL"> Link </option>

Mit dieser Zeile Code können Sie beliebig viele Links in das
Dropdown – Menü setzen.

Die zweite Variante ist die ohne Button, hierbei wird die Seite
sofort bei der Auswahl des Menüpunktes geöffnet.


Ohne Button

<form name="form">
<select name="link" SIZE="1"
onChange="window.location.href = document.form.link.options[document.form.link.selectedIndex].value;">
<option selected value="https://www.devmag.net">
devmag.net </option>
<option value="http://www.exine.de"> Exine </option>
<option value="http://www.drweb.de"> Dr. Web </option>
<option selected value="#">Bitte wählen</option>
</select>
</form>

Es gilt wiederum das gleiche wie bei dem Beispiel mit dem Button.
Die hier Rot markierten Bezeichner sind die name-Attribute
der einzelnen Elemente, welche durch JavaScript angesprochen werden.
Ändern Sie z.B. den Namen des Formulars, dann müssen Sie
alle Vorkommen ebenfalls ändern, damit der Wert des Formularelementes
noch korrekt bestimmt werden kann.

(tf)

This entry was posted in Javascript Tricks. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *