Recipe 3.8. Creating a Link Menu to Other Pages

Problem

You need to create a way for visitors to quickly navigate to the most popular pages on your site.

Solution

Add a JavaScript function that accepts a URL from a form and uses it to load the new web page in the visitor's browser. Add this code to the <head> section of your web pages:

 <script type="text/JavaScript" language="JavaScript"> <!-- function goToPage(url) {  if (url != '') {   window.location = url;  } } //--> </script>

The function goToPage( ) takes the parameter url from the selected value in a form menu on the page. After checking to make sure that the value of the parameter is not empty (url != ''), the function assigns the value to the location property of the window object, causing the browser to load the new page.

A select menu (shown in Figure 3-9) gives site visitors a way to choose the page to jump to and invoke the function.

Figure 3-9. Combined with a simple JavaScript, a select menu gives visitors another way to navigate your site

 <form name="jmenu" method="post"> <select name="jchoices"> <option label="-Jump to another page-" value="" selected>-Jump to another page- </option> <option label="Widgets" value="http://yoursite.com/widgets/">Widgets</option> <option label="Doo-Dads" value=" http://yoursite.com/doodads/">Doo-Dads</option> <option label="Things" value=" http://yoursite.com/things/">Things</option> </select> <input type="submit" value="Go" onClick="goToPage(jmenu.jchoices.options[jmenu.jchoices.selectedIndex].value);return false;"> </form>

The onClick event handler in the submit button calls the function when the visitor clicks "Go" on the form. Both the form and the select menu have namesjmenu and jchoiceswhich will be needed to extract the value of the user's choice. The options property of any select menu in a form (here, jmenu.jchoices.options[]) is an array of sequential numbersstarting with zerofor each choice in the menu. The selectedIndex property is the one number from that array that matches the user's choice in the menu and the value property gives its value. So, when a user selects "Widgets," jmenu.jchoices.selectedIndex equals 1 and jmenu.jchoices.options[1] equals http://yoursite.com/widgets/, the value that gets sent to the function.

Discussion

Like a breadcrumb menu (see Recipe 3.7), a jump menu provides an alternative to the primary navigation that should be near the top of every page on your site. By combining your most popular pages in a menu, you can give visitors a snapshot of your site's offerings that cuts across the various sections on your site.

Jump menus can't replace traditional navigation, though, because the nature of the select menu inhibits browsingall but one of its choices are hidden until the user clicks the menu. Also, the menu will be useless to web surfers who browse your site with JavaScript disabled.

A good place for a jump menu is at the bottom of the page. There, it can provide a useful navigation tool to visitors who know where they want to go next on your site but don't want to scroll to the top of the page to find the link.

Problem

Solution

Figure 3-9. Combined with a simple JavaScript, a select menu gives visitors another way to navigate your site

Discussion

See Also