tags:

views:

24

answers:

2

Is it good practice to use dropdown lists for navigation? I am making a web application that has some hierachical menus. I have considered several options but none of them seems to be good. Here are some of them:

  1. Use a horizontal top level menu and make the child menus appear below when a top level menu is selected. Problem: my top level menu are many and are not fitting in the 960px width. so are the child menus and i want the ability to increase them.
  2. Use horizontal top level menu (allow them to wrap when they dont fit in the page width) and then arrange the child menus vertically on the left side bar. advantage: the child menus can grow vertically. Problem: wrapping top menu bar will look ugly. Incase i want to have a hierachical menu that is more than 2 levels, am stuck.
  3. Use accordions e.g - Jquery accordion - advantage: arranging menu's vertically leaves enough room for expansion. Problems: The accordion will be on the left sidebar. I would love to keep the menus at the top and leave the entire width below the menu for the content. Its hard for a user to see the currently selected menu because the accordion seems to be resetting to the initial status after a page refresh. I know this can be fixed but am not a javascript expert. I would also like to keep my page with minimum javascript.
  4. user a tree for navigation. seems like a natural choice for hierachical menu but for no reason, i dont like it. It cant fall back when there is not javascript.

    5.Use of dropdown lists- I can put the dropdown lists at the top and each determines the content of the rest. It seems like the best option for all my needs but i dont know if from a usability point of view, this is a good thing to do.

any opinion will be highly appreciated.

+1  A: 

if youve got that many menu items that you cant fit it concisely into the topnav, i'd consider reorganising your content.

Go and find a user thats never seen the system and get them to try and find "x", then ask them a week later were it was.

try breaking it down in to three levels instead of two.

Take a look at some large online shops, like amazon or ebuyer. they have abstract subjects at the top, then as you drill down you get more and more subnavs.

Andrew Bullock
A: 

Look at this page, simple CSS navigation but you can create a really nice menu/submenu etc.

http://htmldog.com/articles/suckerfish/

Used it on couple of sites for companies and they all called it a good method to view their categories.

Example: http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html
Example: http://www.yec.nl
Example: http://www.klaveryachtpainting.com

Jordy