Drop Down Menu TutorialA 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 ...>
First, copy this Javascript and paste it exactly as is into the
<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
<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> DisclaimerThe 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.VALUE <OPTION ...>
<OPTION VALUE="http://www.ninthwonder.com" >Ninth Wonder
indicates that the URL is
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
This technique also allows you to target the list at another frame. We'll look at that next. |