Problems with Pull Down Menus See page 535 of Web Design: The Complete Reference for more information. Using a pull-down menu for navigation can save a great deal of screen real estate, compared to conventional navigation bars. By combining JavaScript with HTML, effective pull-down links can be implemented with relative ease. There are, however, a few problems presented by this approach to navigation. Is this navigation or a form element?   Because many users may be more familiar with the pull-down selection menus in online forms, there is some risk of creating confusion. Label the pull-down to indicate that its function is navigation; the first item in the list can also be used to identify the nature of the pulldown: Using a "go" button can also help: Rule: Make the function of a navigation pull-down menu clear by context, labels, and possibly a trigger button. There are further reasons to consider the use of a "go" button. Pull-downs that trigger a page load as soon as a link is selected can be unwieldy; it is very easy for a user to unintentionally go to the wrong place, especially when scrolling down a long selection list. Since this use of pull-down menus involves some JavaScript, it is important to consider what will happen if a user has JavaScript disabled. In many sites, without JavaScript the navigation completely breaks and the user is left pulling menus that don't do anything. The use of the go button can trigger a backup call to a server-side program to redirect the page. Rule: Make sure pull-down navigation degrades gracefully when JavaScript is off. It is possible to have the go button show up only when JavaScript is off, or to leave it on the screen all the time. Leaving it onscreen when JavaScript is on may cause some user frustration, as users will want to click on the "go" button, but won't be able to because the pull-down menu triggers an immediate page load. Having the go button trigger the page load is a better way to go than automatic selection, since it gives a sense of closure to the user's action and avoids the hair-trigger effect this form of navigation often exhibits. A complete script is presented here that deals with all the problems and provides cosmetic improvements to the pull-down navigation style.

Overview | Chapters | Examples | Resources | Buy the Book!