How to Make a Drop Menu

A simple drop menu works like this:

To create a drop-menu, copy the code below into your HTML page. Change the options to your own URLs. If you need to change the name of the select menu ("menu1"), you'll need to change both instances of the name in the button tag as well.

<form name="menuform">
<select name="menu1">
<option value="/index.html" selected>Home Page</option>
<option value="/internet/index.html">Internet Tutorials</option>
<option value="/internet/javascript/index.html">JavaScript Tutorials</option>
</select>
<input type="button" name="Submit" value="Go" 
onClick="top.location.href = this.form.menu1.options[this.form.menu1.selectedIndex].value;
return false;">
</form>

The code above is all you need for a simple menu, but there are many variations and possibilities.

Menu Without Button

To jump to the selected URL as soon as the selection is made (i.e. without having to click a button), use the following code:

<form name="menuform">
<select name="menu2" 
onChange="top.location.href = this.form.menu2.options[this.form.menu2.selectedIndex].value;
return false;">
<option value="/index.html" selected>Home Page</option>
<option value="/internet/index.html">Internet Tutorials</option>
<option value="/internet/javascript/index.html">JavaScript Samples</option>
</select>
</form>

The result works like this:

Open URL in New Window

To make the selected URL open in a new window, use the following code:

<form name="menuform">
<select name="menu3" 
onChange="window.open(menuform.menu3.options[menuform.menu3.selectedIndex].value);
return false;">
<option value="/index.html" selected>Home Page</option>
<option value="/internet/index.html">Internet Tutorials</option>
<option value="/internet/javascript/index.html">JavaScript Samples</option>
</select>
</form>

The result works like this:

You can also control the size and functionality of the new window, for example:

window.open(menuform.menu3.options[menuform.menu3.selectedIndex].value,'URLwindow','width=400,height=200');

Open URL in a Specific Frame

To make the selected URL open in another frame, use the following code (where "framename" is the name of the target frame):

<form name="menuform">
<select name="menu4">
<option value="/index.html" selected>Home Page</option>
<option value="/internet/index.html">Internet Tutorials</option>
<option value="/internet/javascript/index.html">JavaScript Tutorials</option>
</select>
<input type="button" name="Submit" value="Go" 
onClick="top.framename.location.href = this.form.menu4.options[this.form.menu4.selectedIndex].value;
return false;">
</form>