Fly-out and drop-down menu

Tagged as: , ,
 

The Design Need:

The user needs to navigate the site but there are to many options to show in the main navigation bar. You want to offer the user direct access to all sections of the website.

Design Examples:

Mobile.de uses a drop-down menu with illustrations in the main horizontal menu

Design Solution:

Show the main categories in a horizontal or vertical menu and place the sub-categories underneath.

Hover or clickable menu?

There are two ways to access a fly-out or drop-down menu in graphical user interfaces.

On hover, the menu appears when the pointer hovers over a navigation bar item. To make this kind of interaction usable it is important to stick more or less to the following timing:

  • Show the menu after the pointer has been hovering for 0.5 seconds on the navigation item
  • Displaying the fly-out or drop-down menu should not take longer than 0.1 seconds
  • Wait 0.5 seconds before you remove the menu after the pointer leaves the area (navigation item and menu)
  • Removing the fly-out or drop-down menu should not take longer than 0.1 seconds

Remember to test these timings on old(er) systems and slow connections.

On mouse click, the menu appears when the user clicks on a navigation bar item. The menu will stay open until the user clicks outside the menu, on the same navigation item, on another item in the navigation bar or on a close button.

Some extra design best practices to take into account when you use a fly-out or drop-down menu are as follows:

  • Do not use fly-out or drop-down menus with more than two levels.
  • Make the active areas larger than just the text of the menu item; this makes selection by the user easier.
  • Indicate on the main menu where the user can expect a fly-out or drop-down menu.
  • Use hover effects to show which main menu item is opened and where the drop-down or fly-out menu belongs.
  • Use hover effects on the menu items in the drop-down or fly-out menu to show where the mouse pointer is in the menu.
  • Do not use scrollbars in drop-down or fly-out menus.
  • Use grouping in the menu if necessary (see “mega drop-down menus work well”).
  • Deactivate the tooltip on the navigation bar item. Using tooltips for items in the menu can, however, be helpful for the user.
  • Do not build drop-down or fly-out menus in java script since search engines do not handle these menus very well.

When to use:

When you want many items, pages, products, sections, etc. to be accessible in one click and organisable into categories

Why use this solution (rationale):

Using fly-out and drop-down menus hides navigation options from the user. On the other hand, these menus help to save space and give direct access to a large number of links.

More info elsewhere:

• Categorized as Design Patterns