I've seen two different types of navigation bars when a site requires nested navigation, one where hovering over a link drops down an additional menu, and one where a second horizontal bar is populated with the links in this category. In what situations should I prefer one over the other? It seems like drop down navigation is the most common, but are there situations where having the two horizontal columns would work out better?
Add a comment
|
6 Answers
There is a issue of the number of links you need to access. Dropdowns can give access to many more links.
There is the vertical space issue. Floating dropdowns save you some space.
And there is the ease of use issue. I tend to think that if your website has distinct sections, e.g., faq, tour and support, and each one of these sections has a few sub-sections - using the 2 row navigation may be easier because then the user has a one-click-access to the other sub-sections.
I prefer to avoid drop down menus for a few reasons.
First, it is easier to incorporate a 2 level navbar into your sites design without it looking out of place. It can be a pain getting the dropdown menu to match the rest of the page, especially when using textures. I often see sites that have great textures/graphics and then the dropdown menu is just a solid color.
Second, they disappear on accident, or don't disappear soon enough. You really need to tweak the amount of time after mouse out it disappears. If you don't get it right, you can accidentally move the mouse out of the menu and it will disappear right away. Or you could be done with the menu, move the mouse out, and it will just sit open until it reaches the timeout.
As others have mentioned, the choice really depends on how many links you have to display. If you have many sub sections, you will almost have to use dropdown menus. But if you have the space, I would recommend a 2 level nav. It's quick, easy, usable, and it is easy to style to match the overall site design.
answered Aug 10, 2010 at 19:49
I prefer large, clickable drop-downs that don't disappear the instant you move your mouse outside the area. Even better, slide the navigation down and make the options stick.
When hovering over the primary navigation buttons for vertical rows, the sub-links almost always mess up and change to another button's rows when I accidentally touch another button or the page body while looking for the right link.
If you have more than 2 levels the horizontal option becomes very messy, but for a small menu hierarchy I think it is more of a graphics issue. I find them both easy to use and understand and on some sites one looks better and on others the other looks better.
2-level menus may be messier, but you should use them as a fallback at the very least, because if your visitors are browsing with JavaScript disabled, your fancy drop-downs won't work.
In addition to the other answers, an advantage of preferring a 2-row navigation is that users always know where to look for the navigation (instead of menus being located in relative space to their "parent"). A 2-row navigation is also a more "portably consistent" interface - meaning your interface can stay similar across various browser capabilities, such as javascript/no javascript, desktop/mobile, etc.
