Chapter 8. Using Jump Menus

A jump menu is a handy navigation element to use when you have a large site with lots of pages. Essentially, it's a quick index to the most common pages on your site, as Figure 8.1 shows. Your visitors select an item from the menu, and a simple JavaScript function causes that particular page to load. This way, your visitors don't have to navigate your site step by step.

Figure 8.1. Use jump menus like this one to index the most common pages on your site. Your visitor selects a page from the menu, and the page loads.

GEEKSPEAK

A jump menu is a quick index to the most common pages on your site.

To build a jump menu, you need two components: an HTML form (which supplies the doohickey that the visitor clicks, otherwise known as the front end) and a JavaScript function (the quickie program that makes the jump menu work, also called the back end). The toolkits in this topic show you how to create both.

TIP

A jump menu is a nice extra feature for your site, but don't rely on it for all your navigation. There's no substitute for a good, old-fashioned nav bar.

When it comes to jump menus, there are two schools of thought. The first is to include a Go button or something for the visitor to click after selecting a page from the menu. Nothing happens until the visitor clicks the button. The alternative is to make the jump menu self-activating. That is, as soon as the visitor selects a page, the jump menu automatically does its thing.

Which method is better? It's hard to say. If you include a Go button, your visitors are less likely to make mistakes. If they decide they don't want to use the jump menu after they open it (a favorite of the marketing department), or if they second-guess what page they want, the Go button gives them the option of ignoring the jump menu or making another choice before jumping. On the other hand, the Go button requires another click, which slows your visitors down. A self-activating jump menu requires only one click, so it's faster. You might test both types of jump menus on your site to see which works best, but, when in doubt, give yourself some idiot insurance and include the Go button.

TOOL KIT

Jump Menu with Go ButtonFront End

This section of HTML code gives you the front end of your jump menu.

[View full width]
 <form name="jumpmenu">   <select name="pages"> <! The following line gives the first item in the menu. The  selected attribute in the option tag means that this is the item  that appears in the menu by default when the page loads. >     <option selected>Choose a page...</option> <! The next line inserts a division in the list of menu items.  You can delete this line if you want. >     <option>First category</option> <! The jump items come next. In the value attribute, give the  path to the page where you want to jump, like aboutus/index.htm  or ../products/brochure.htm. It can be an absolute,  document-relative, or root-relative path, just like a hyperlink. >     <option value="firstpath">First page name</option>     <option value="secondpath">Second page name</option>     <option value="thirdpath">Third page name</option> <! Repeat lines like the above for as many options as you want  in this division of the list. > <! The next line inserts a new division. Delete at will. >     <option>Second category</option> <! Here come more jump items. Repeat this line for as many  options as you need, and then close the select element. >     <option value="fourthpath">Fourth page name</option>   </select> <! The next line adds a button to the form. >   <input type="button" name="go" value="Go" onClick="doJumpMenu();"> <! Now close the form, and you're done. > </form> 

TOOL KIT

Self-Activating Jump MenuFront End

Use this block of HTML to place a self-activating jump menu on the page.

[View full width]
 <form name="jumpmenu"> <! The next line adds a select object, a.k.a. a dropdown menu,  to the form, and instructs it to watch for the onChange  JavaScript event. When the visitor changes the form, the jump  function launches. >   <select name="pages" onChange="doJumpMenu();"> <! The rest of the form looks and works like the previous one.  >     <option selected>Choose a page...</option>     <option>First category</option>     <option value="firstpath">First page name</option>     <option value="secondpath">Second page name</option>     <option value="thirdpath">Third page name</option>     <option>Second category</option>     <option value="fourthpath">Fourth page name</option> <! Add as many divisions and jump items as you need. >   </select> </form> 

TOOL KIT

Jump MenuBack End

Add this JavaScript function to your site to make your jump menu work. This function is the same for the Go-button and self-activating jump menus.

[View full width]
 <script language="JavaScript"> /* Use the script tags only if you're embedding this function  inside your HTML page. Omit the script tags if you're adding this  function to an external JavaScript file. */   function doJumpMenu() {     var menu = document.jumpmenu.pages; /* The following line gets the value attribute of the selected  menu item. */     var menuValue = menu.options[menu.selectedIndex].value; /* The following if/then block jumps to the selected page as long  as the value attribute isn't empty. */     if (menuValue != "") {       location.href = menuValue;     }   } </script> 

TOOL KIT

Jump Menu with Graphical Go ButtonFront End

If you want to use a graphical Go button instead of the generic gray HTML button, all you have to do is design your button in your favorite graphics program. Then, add the following block of HTML to your page to create the menu:

[View full width]
 <form name="jumpmenu" onSubmit="return doJumpMenuGraphicButton();"> <! The form tag above waits for the onSubmit event to launch  the jump-menu script. > <! Below is the menu. It works just like the others. Add as  many divisions and jump items as you like. >   <select name="pages">     <option selected>Choose a page...</option>     <option>First category</option>     <option value="firstpath">First page name</option>     <option value="secondpath">Second page name</option>     <option value="thirdpath">Third page name</option>     <option>Second category</option>     <option value="fourthpath">Fourth page name</option>   </select> <! Here comes the graphical Go button. >   <input type="image" name="go" src="imagepath"  width="imagewidth" height="imageheight" border="0"> </form> 

TOOL KIT

Jump Menu with Graphical Go ButtonBack End

You need a slightly different JavaScript for the jump menu with a graphical Go button. Web browsers such as Internet Explorer and Netscape treat image buttons as submit buttonswhen the visitor clicks, the browser tries to submit the form, which you don't want or need for a simple jump menu. These little tweaks to the function prevent the browser from submitting the form.

[View full width]
 <script language="JavaScript"> /* If you're adding this script to an external JavaScript file,  you don't need the script tags at the beginning and end of this  listing. If you're embedding the page in your HTML document, keep  the script tags, and add the code to the head section of your  page. */   function doJumpMenuGraphicButton() {     var menu = document.jumpmenu.pages; /* The following line gets the value attribute of the selected  menu item. */     var menuValue = menu.options[menu.selectedIndex].value;     if (menuValue == "") { /* The following line prevents form submission. */       return false;     } else { /* The following line jumps to the selected page as long as the  value attribute isn't empty. */       location.href = menuValue; /* The next line prevents form submission. */       return false;     }   } </script>