Learn HTML Code Tutorial Reference Guide

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.



 

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   Privacy Policy   |   About
Copyright ©1997-2002 Idocs and ©2002-2014 HTML Code Tutorial