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="http://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="http://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)

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: