WEB DESIGN GARAGE [Electronic resources] نسخه متنی

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.

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 class="docEmphStrong">front endback 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.

[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> class="docEmphStrong">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
or ../products/brochure. It can be an absolute,
document-relative, or root-relative path, just like a hyperlink. >
<option value=" class="docEmphStrong">firstpathFirst page namesecondpathSecond page namethirdpathThird 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> class="docEmphStrong">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=" class="docEmphStrong">fourthpathFourth 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>

[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> class="docEmphStrong">First categoryfirstpathFirst page namesecondpathSecond page namethirdpathThird page nameSecond categoryfourthpathFourth page name</option>
<! Add as many divisions and jump items as you need. >
</select>
</form>

[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 = }
}
</script>

[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> class="docEmphStrong">First categoryfirstpathFirst page namesecondpathSecond page namethirdpathThird page nameSecond categoryfourthpathFourth page nameimagepath"
width=" class="docEmphStrong">imagewidthimageheight" border="0">
</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 =
/* The next line prevents form submission. */
return false;
}
}
</script>