Java Script Tutorial on Drop-Downs
A drop-down menu can help a Web designer organize Web page layout by placing links into a JavaScript menu. By clicking on the arrow on the menu, the list of links will drop down and allow the Web page user to select a location. This design is useful if you have a large number of links to display on the website, or if you wish to organize numerous lists of links by a certain topic.
Other People Are Reading
Instructions
-
-
1
Launch your HTML editing program and open up the HTML page you wish to edit.
-
2
Locate the <head> section of the HTML Web page. This will usually be at the top of the document.
-
-
3
Paste the following script into the <head> section. This script must come between the opening <head> tag and the closing </head> tag.
<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> -
4
Locate the place in the <body> section of the HTML code where you would like to place your drop-down menu.
-
5
Paste the following <select> JavaScript code in that location:
<FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Link List Header<OPTION VALUE="http://www.yoururl.com" >Name of Link
<OPTION VALUE="http://www.yoururl.com" >Name of Link
<OPTION VALUE="http://www.yoururl.com" >Name of Link</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM> -
6
Change "Link List Header" to be the topic of your drop-down menu, or to have a generic header like "Choose Your Destination."
-
7
Change "http://www.yoururl.com" to be the URL of the site you wish to include in the drop-down menu.
-
8
Change "Name of Link" to the name of that site you wish to show in the drop-down menu.
-
9
Add more links as you need by adding additional lines of "<OPTION VALUE="http://www.yoururl.com" >Name of Link" above the </select> tag.
-
10
Save your edited HTML file and upload the file to your host to view the changes.
-
1
References
- Photo Credit internet image by Travelfish from Fotolia.com
