DROP-DOWN MENUS

Drop-down menus are simple HTML selection menus with options. Selecting an option brings the user to the new page. This type of navigation is often used for quick links, which jump to a new page across a site structure, for instance.

Accessibility

For accessibility reasons, do not have the new page reload just by selecting the option and releasing the mouse. This requires JavaScript (called an "onChange" event) and can cause problems with screen readers. Some screen readers will trigger the link as soon as it is read, prohibiting the user from getting to any other options it the menu.

An alternative is to activate the menu selection with an explicit button or link click just after the menu. An advanced solution might be to change the site's behavior based on whether a screen reader is used. A Go button would then appear only if needed.

A drop-down menu on the IBM web site navigates to the site in a different language and country (www.ibm.com, Figure 3-35) and is followed by a Go button to activate the selection.

Using a drop-down menu on IBM.com for language selection

Figure 3-35. Using a drop-down menu on IBM.com for language selection

The web site for the ASBA Group, a South African banking group (www.absa.co.za/absacoza), has an interesting navigation mechanism. Two drop-down menus allow visitors to first pick a verb, then an action (Figure 3-37). This is part of a sentence beginning with "I want to." A selection in the first ...

Get Designing Web Navigation now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.