Using Jump Menus

Jump menus are a compact way of providing a list of links to the user. You are presented with a dropdown list where the items listed behave as links, you click on them and off you go to a new page.

These lists are often presented as ‘Quick Links’ to highlight important pages in a site or as ‘Site Navigation’ but you could present them in many other ways. On Gifford Plumbing Services (my brother’s site) I’ve used them to highlight the areas he covers.

The jump menu uses a HTML select form with a small bit of javascript. Here is the HTML code:


<form name="JumpMenuForm">
<select name="JumpMenu" onchange="MM_jumpMenu('parent',this,0);MM_jumpMenu('parent',this,0)">
<option selected="selected">Select Link...</option>
<option value="Link1">Link 1</option>
<option value="Link2.htm">Link 2</option>
<option value="Link3.htm">Link 3</option>
<option value="Link4.htm">Link 4</option>
<option value="Link5.htm">Link 5</option>
</select>
</form>


And the javascript:

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}


If you use Dreamweaver, you can easily add the above code by going to Insert > Form > Jump menu. This allows you to add the list items and links and then inserts the HTML code for the form).

Then go to the Behaviours panel and you should see ‘Jump Menu’ listed. Select this, then click on the ‘Add behaviour’ button and select ‘Jump Menu’ from the list. This adds the javascript to the head of your document.

One problem is that I don’t think Jump Menus are search engine friendly – search engines such as Google can’t follow the links. This is not a problem as long as you link to the pages elsewhere in your site, i.e. your site map.