Drop Down Menu Tutorial

A drop down menu is a popular way to cram a lot of links into a small space. A drop down menu (also simply called a "dropdown") is a <SELECT ...> list of web pages. The user selects one of the options and presses the "Go" button. For example, this dropdown gives you the choice of three pages: Dropdowns are one of those web page techniques that can be done easily -- and incorrectly -- or with just a little extra effort and correctly. The technique described here is quite simple. We've written all the Javascript code, so mostly you'll only need to do a little copying and pasting.

First, copy this Javascript and paste it exactly as is into the <HEAD> section of your document:

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
   {
   if(mySel.form.target)myWin = parent[mySel.form.target];
   else myWin = window;
   if (! myWin) return true;
   myWin.location = myVal;
   }
return false;
}
//-->
</SCRIPT>

Now we create a <SELECT ...> list of pages. The following code creates the form and the select list. Copy most of this code exactly as it is. The only part to modify for your own page is the list of URL options grouped together in the middle:

<FORM
     ACTION="/cgi-bin/redirect.pl"
     METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Choose a Destination...

<OPTION VALUE="/tags/"                     >Guide to HTML
<OPTION VALUE="/"                          >Idocs Home Page
<OPTION VALUE="http://www.ninthwonder.com" >Ninth Wonder

</SELECT>

<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>

Disclaimer

The code in the example above uses a free service of Idocs to redirect browsers that do not use JavaScript. This service is provided without warranty of any kind, and without any promise that the service will always remain available. Please check that your JavaScript is working correctly. We've had to cut some sites off because their JavaScript was implemented incorrectly and we were doing all of their redirects.

Each option has two parts. The URL of the destination page goes in the VALUE attribute. The text to display in the list goes after the <OPTION ...> tag. So, for example, this code:

<OPTION VALUE="http://www.ninthwonder.com" >Ninth Wonder

indicates that the URL is http://www.ninthwonder.com and the menu option should read Ninth Wonder.

Notice that the first option, the one that reads "Choose a Destination...", has an empty string as its value. That empty string tells the script that the user didn't really choose a URL and it shouldn't do anything.

Here's how it all works. When the web page first comes up, the first option in the select list is displayed. The first option is a dummy which just gives the instruction to choose a page. The user selects an option and clicks on "Go". If they selected the first option nothing happens. If they choose any of the remaining options the script gets the URL from the value of the option and redirects the browser to that page. If the browser does not have Javascript (something to always plan for) then the browser goes to /cgi-bin/redirect.pl (we've already got the CGI set up for you) which uses good old fashioned HTTP to redirect the browser.

This technique also allows you to target the list at another frame. We'll look at that next.

Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License . Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.