Fly-out Menu

Problem

Users need to have direct access to sub-navigation but the amount of screen estate for navigation is limited

Solution

Combine horizontal navigation with a sub-menu that flies-out when the users hovers over the main menu-item

From www.idea.com

Use when

For experienced users who want quick access to menu items. Typically there is a main page and all clickable items are grouped under a label. The menu items themselves do not link to a page. Space for navigation is limited, if not consider other navigation systems such as a Directory Navigation. Menu items should be found always in the same spot. The number of mouse-clicks should be minimized. No reloads of pages

How

On mouse-over show the menu. The menu always directly moves up, down or right (never left) in such a way that it does not cover the other menu items. The flying-out should be instant or very quick otherwise users cannot switch quickly. Preferable combined with a Breadcrumbs. The fly-out menu may exist horizontally or vertically.

Issues with Fly-out Menus

Why

Fly-out menus can work well but they may also kill usability. The actual implementation is crucial for its success. On the one hand, fly-out menus save space that may be used better for the content area of the site. But on the other hand it hides the navigation from first sight. It is a kind of 'mystery-meat navigation'. If executed well with the mentioned points address well it provides very quick access to sections in the site without cluttering up the screen estate with navigation. In particular when users 'get it' it may help them a lot. On the other hand, for one-off interactions it may cause usability issues.

More Examples

Microsoft also makes extensive use in their support sites.


Literature

Usability and Fly-out Menus


Code examples

More menus in CSS
A List Apart: Suckerfish Dropdowns
Suckerfish improvements
plml logo

Comments

1 comment has been added to this pattern.


todd g, 14th November 2007
here are some additional css menu resources (free): http://www.13styles.com


Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha