nl.internet.www.ontwerp

[home] [nieuws] [download] [contact] [colofon]

Voorbeeld: een pulldown-menu

Je kunt geen pulldown-menu maken met alleen het gebruik van HTML. Je hebt of een stukje JavaScript nodig, of verwerking van formuliergegevens door een script op een server. Je kunt deze twee methoden ook combineren. Maar je moet je altijd afvragen of het gebruik van een pulldown-menu echt zinvol is. Vaak is een lijstje of een rijtje met gewone links gebruikersvriendelijker: de gebruiker overziet in één oogopslag de mogelijkheden, en het doel is gelijk duidelijk.

Met JavaScript

Een voorbeeld van een menu waarbij niet op een 'verzendknop' gedrukt hoeft te worden.

Deze code was hiervoor nodig:

<FORM NAME="nav">
<SELECT NAME="SelectURL" onChange="document.location.href=
document.nav.SelectURL.options[document.nav.SelectURL.selectedIndex].value">
<OPTION VALUE="pulldown.html" SELECTED>Kies een item:
<OPTION VALUE="../index.html">Home
<OPTION VALUE="../faqs/index.html">FAQs
<OPTION VALUE="../artikelen/index.html">Artikelen
<OPTION VALUE="../contact.html">Suggesties
<OPTION VALUE="../colofon.html">Colofon
<OPTION VALUE="../zoeken.html">Zoeken
</SELECT>
</FORM>

Ook werkend zonder JavaScript

Voor bezoekers die geen JavaScript hebben (ingeschakeld), kun je als 'backup' het formulier versturen naar een (gratis) webservice, bijvoorbeeld SelectURL van John S. Roberts.

Gebruik dan wel absolute URL's en een formulier met een verzendknop, zoals in het volgende voorbeeld:

<FORM ACTION="http://www.uky.edu/cgi-bin/SelectURL" METHOD="post" NAME="nav2">
<SELECT NAME="SelectURL" onChange="document.location.href=
document.nav2.SelectURL.options[document.nav2.SelectURL.selectedIndex].value">
<OPTION VALUE="http://hace.dyndns.org/niwo/pulldown.html" SELECTED>Kies een item:
<OPTION VALUE="http://hace.dyndns.org/niwo/index.html">Home
<OPTION VALUE="http://hace.dyndns.org/niwo/faqs/index.html">FAQs
<OPTION VALUE="http://hace.dyndns.org/niwo/artikelen/index.html">Artikelen
<OPTION VALUE="http://hace.dyndns.org/niwo/contact.html">Suggesties
<OPTION VALUE="http://hace.dyndns.org/niwo/colofon.html">Colofon
<OPTION VALUE="http://hace.dyndns.org/niwo/zoeken.html">Zoeken
</SELECT>
</FORM>
<INPUT TYPE="SUBMIT" VALUE="Go!">

Meer tips

Als je de beschikking hebt over een eigen server, kun je de verwerking beter zelf doen. CGI-scripts daarvoor zijn makkelijk te vinden, bijvoorbeeld bij The CGI Resource Index.

Zie verder Navigational pulldown menus in HTML, het uitgebreide document waar deze pagina op gebaseerd is.