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 web sites:

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/html/redirect.pl" 
 METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Choose a Destination...
<OPTION VALUE="http://www.godefy.com">GoDefy.com
<OPTION VALUE="http://www.mikes-marketing-tools.com">Mike's Marketing Tools
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>

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.godefy.com">GoDefy.com

indicates that the URL is http://www.godefy.com and the menu option should read GoDefy.com.

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/html/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.

Drop Down Menu With Frames >>>

Did you know the Definitive Guide to Google AdWords shows you how to double traffic in 30 minutes?