Pull-Down Menus

One of the most common navigation aids is the select menu. This simple pull-down menu derives most of its functionality from the (X)HTML << select >> tag. The tag contains a list of << option >>s offering navigation or task choices to the user . An event handler bound to the << select >> tag fires the appropriate action when the user makes a selection, instantly whisking the user to the selected page.

Pull- downs , like typical application menus, tend to be placed at the top of pages. Although they save a great deal of real estate over conventional navigation bars that show the user all choices at once, they do so by hiding all but one of the links at a time. While this might be perfectly acceptable, it means that there are now two uses for pull-downs: one allowing users to navigate to a page of their choice and the traditional use as a form field. Some users may be confused with the dual purpose if the context of use is not made clear. A pull-down used for navigation should not be placed within a form intended for data entry and it should always be clearly labeled.

The following example illustrates the concept. Figure 16-1 shows the result.

Figure 16-1: A basic pulldown menu

 <<script type="text/javascript">> <<!-- function redirect(menu) {   var choice = menu.selectedIndex;   if (choice != 0)     window.location = menu.options[choice].value; } // -->> <</script>> <<form name="navform" id="navform" method="post" action="redirector.cgi">> <<strong>>Site Selector<</strong>><<br />> <<select name="sites" id="sites" onchange="redirect(this);">> <<option value="" selected="seclected">>Select a site to visit<</option>> <<option value="http://news.google.com">>Google News<</option>> <<option value="http://news.yahoo.com">>Yahoo! News<</option>> <<option value="http://www.alternet.org">>AlterNet<</option>> <<option value="http://allafrica.com">>AllAfrica<</option>> <</select>> <<noscript>> <<input type="submit" value="Go" />> <</noscript>> <</form>>

There are several noteworthy things going on in this example. First, notice that the example included a Go button inside of a << noscript >> to trigger the page load. This button causes submission to a server-side CGI program that deciphers the menu choice and redirects the user appropriately. It is important to include such a button in case a user is visiting the site with a browser where JavaScript is unsupported or disabled. It is often convenient to include a Go button even if JavaScript is enabled. While automatic page loads are very fast, they can be somewhat of a hair-trigger form of navigation. It is very easy for a user to slip up on the mouse, particularly on a long pull-down, and accidentally trigger a page load.

Another aspect of the previous example worthy of discussion is the fact that the menu, by default, has a fake entry selected. If this entry wasn t selected by default, the first navigation item would be, and thus the user wouldn t be able to visit Google News because the onchange handler only fires when the menu option changes .

A similar but unaddressed problem is that, should the user select an item for navigation, visit the page, and then click the Back button, the menu will default to showing their previous menu choice. Because onchange fires only when the option selected changes, if the user makes the same selection again, the browser will not navigate to the page. This problem also crops up in menus with divisions, so we ll discuss it next within that context.

Improved Pull-Down Menus

Often menus include << option >>s marking divisions between choices or include headings indicating the nature of various groups of options. Consider what happens if the user pulls the menu down and selects a separator. Shouldn t the menu reset to the top like a traditional menu in an application? Most, for some reason, do not. Second, consider a scenario where the user does select a legitimate choice and is sent to a new page. Once at that page, the user backs up, only to find the pull-down selecting the choice they just made. Suddenly deciding that the page they had selected was correct, they have to either reload the page to reset the pull-down or choose some false choice and try again (try this at home!).

The problem in both cases is that the menu is not reset when the user reloads the page or selects a non-active item like a separator. The following example addresses these problems and adds some cosmetic enhancements to our pull-down navigation.

 <<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> <<html xmlns="http://www.w3.org/1999/xhtml">> <<head>> <<title>>Select Navigation<</title>> <<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />> <<style type="text/css">> <<!--    .nochoice {color: black;}    .choice   {color: blue;} -->> <</style>> <<script type="text/javascript">> <<!-- function redirect(pulldown) {   var newLocation = pulldown[pulldown.selectedIndex].value;   if (newLocation != "")     self.location = newLocation; } function resetIfBlank(pulldown) {   var possibleNewLocation = pulldown[pulldown.selectedIndex].value;   if (possibleNewLocation == "")     pulldown.selectedIndex = 0;   // reset to start since no navigation } //-->> <</script>> <</head>> <<body>> <<form name="navform" id="navform" action="redirector.cgi" method="post">> <<b>>Favorite sites:<</b>> <<select name="menu" id="menu" onchange="resetIfBlank(this);">> <<option value="" class="nochoice" selected="selected">>Choose your site<</option>> <<option value="" class="nochoice">><</option>> <<option value="" class="nochoice">>Search sites<</option>> <<option value="" class="nochoice">>---------------------------<</option>> <<option value="http://www.google.com" class="choice">>Google<</option>> <<option value="http://www.yahoo.com" class="choice">>Yahoo!<</option>> <<option value="http://www.teoma.com" class="choice">>Teoma<</option>> <<option value="" class="nochoice">><</option>> <<option value="" class="nochoice">>E-commerce<</option>> <<option value="" class="nochoice">>---------------------------<</option>> <<option value="http://www.amazon.com" class="choice">>Amazon<</option>> <<option value="http://www.buy.com" class="choice">>Buy.com<</option>> <<option value="" class="nochoice">><</option>> <<option value="" class="nochoice">>Demos<</option>> <<option value="" class="nochoice">>---------------------------<</option>> <<option value="http://www.democompany.com" class="choice">>DemoCompany<</option>> <</select>> <<input type="submit" value="Go"        onclick="redirect(document.navform.menu); return false;" />> <</form>> <<script type="text/javascript">> <<!-- document.navform.menu.selectedIndex = 0; //-->> <</script>> <</body>> <</html>>

The output is shown in Figure 16-2. Playing around with the example reveals that it not only resets itself if the user selects a non-choice, but that when you click the Back button after visiting a selection, the menu resets to its initial state (thanks to the << script >> setting the selectedIndex to ).

Figure 16-2: An improved pull-down menu with divisions

HTML pull-down menus as navigation devices represent a break from traditional GUI design, so not much is known about their efficacy or usability. Instead of a repurposed form widget we may desire to build a more GUI-like menu ”with JavaScript and CSS we can do just that..