Dropdown Menus

Dropdown menus are incredibly versatile - they can be made into menus, parts of a form, polls, etc. ;D

For a simple dropdown menu, the html is:

<form name="links">
<select name="menu1">
<option value="0">Links</option>
<option value="0"></option>
<option value="http://elusionerie.com">Elusionerie</option>
<option value="http://tutorials.elusionerie.com">Epichronicity</option>
<option value="http://ephereal.com">Portfolio</option>
</select>
<input type="button" onClick="location=document.links.menu1.options[document.links.menu1.selectedIndex].value;" value="GO">
</form>

If you are using multiple forms on the same page, don’t forget to name the forms differently(ie. replace ‘menu’ with something else)!!!

If you just want a simple form with no hyperlinks(suitable for contact forms etc.),simply use this code instead:

<form name="links">
<option>Blue</option>
<option>Red</option>
<option>Yellow</option>
</form>

No Submit Button

If you don’t want a ‘Go’ button and want the page to load immediately after something is clicked, use this code:

<form name="links">
<select name="menu2" onChange="location=document.links.menu2.options[document.links.menu2.selectedIndex].value;" value="GO">
<option value="0">Links</option>
<option value="0"></option>
<option value="http://elusionerie.com">Elusionerie</option>
<option value="http://tutorials.elusionerie.com">Epichronicity</option>
<option value="http://ephereal.com">Portfolio</option>
</select>
</form>

Also remember to use different form names(select name=…) if you are using multiple forms on the same page!

Use an image as the ‘Go’ button

If you want to use a custom search button image, use this code:

<form name="links">
<script>
function jumpMenu(){
location=document.jump.menu3.options[document.jump.menu3.selectedIndex].value;
}
</script>
<select name="menu3">
<option value="0">Links</option>
<option value="0"></option>
<option value="http://elusionerie.com">Elusionerie</option>
<option value="http://tutorials.elusionerie.com">Epichronicity</option>
<option value="http://ephereal.com">Portfolio</option>
</select>
<a href="Javascript:jumpMenu()"><IMG SRC="http://yoursite.com/image.jpg" border=0></a>
</form>

Target Frames

If you want your menu to target frames, use this code:

<script language="javascript" type="text/javascript">
function jump(form) {
var myindex=form.menu4.selectedIndex
if (form.menu4.options[myindex].value != "0")
{
window.open(form.menu4.options[myindex].value,
target="yourframename");
}
}
//-->
</script>

<form name="links" ACTION=URI>
<select name="menu4" onchange="jump(this.form)">
<option value="0">Links</option>
<option value="0"></option>
<option value="http://elusionerie.com">Elusionerie</option>
<option value="http://tutorials.elusionerie.com">Epichronicity</option>
<option value="http://ephereal.com">Portfolio</option>
</select>
</form>

Styling

Style your dropdown menus with the input and select tags:

input { border: 1px #000 solid; }
select { background: transparent url(inputbg.png);
width: 120px;
color: #413818;
font: 11px "Gill Sans", Arial, Georgia, Serif;
vertical-align: top;
margin: 5px; }

You could also style each option separately like so:

<option value="http://www.elusionerie.com" style="background-color:#FFF">Elusionerie.com</option>

Love this post?

 Loading ...

See also...

• Making Hyperlinks
• Iframes

Leave a Reply