You want to simplify navigation by not exposing secondary levels of navigation at all times
Last month I published a blog post discussing vertical navigation and how a multi-column approach can be used to expose up to two levels of navigation in a vertical format (see Vertical Navigation: Finding your Way). At that time I discussed some of the advantages that could be provided by implementing a persistent two column navigation system. There may be times, however, when exposing two levels of persistent navigation is neither desirable or necessary. This may be the case when you either don’t want to allocate the space for two persistent columns on your page or when you decide that secondary categories are not closely related and the likelihood of users wanting to quickly more between these categories in a single click is small.
Implement secondary navigation as a non-persistent fly-out menu
A non-persistent, fly-out approach to secondary navigation is the proposed approach. This is similar to the persistent navigation menu proposed in the earlier blog post, except that when the secondary menu is open, it simply overlays page content without requiring any shrinkage of the content area available to the application. The secondary menu will automatically dismiss when the user either selects a category or mouses-out of the region occupied by the menu.
Notice that unlike in the case of the persistent navigation, the secondary menu (1) need not occupy a full column from the top to bottom of the content area. In fact, keeping the menu compact and making it only large enough to show the required number of menu items is preferred as it will best keep the users eye focused on the options available. Also, centering the menu vertically with its parent item reduces the amount of required mouse travel and reduces the likelihood that users will accidentally dismiss the menu by leaving the menu when the make a quick rightward movement.
One of the key drawbacks of fly-out menus is that there is no way to use the menu to reflect the users current location in the site since the navigation item related to that page is hidden after the user selects it. Because of this, when using non-persistent secondary navigation it is important to clearly label the page to provide the user with feedback regarding their current location. In the illustration above, Events, the current page is clearly titled (2) and shown selected when the menu is open (3). The Admin item in the primary navigation also appears as selected (4).
Here are some additional considerations that should be taken into account when implementing this pattern:
- The hover area should be made a bit larger than the menu itself to minimize the risk that users will accidentally dismiss it.
- There should be a small delay before hiding the menu when the user leaves the region of the hover area. Welie.com recommends 250ms (http://www.welie.com/patterns/showPattern.php?patternID=fly-out-menu).
When the screen width will no longer accommodate the fly-out menu, an “off-canvas” approach will be used to keep two levels of navigation within one column by giving the appearance of a menu the slides left and right to expose either the primary or secondary set of menu choices.