How to deal with deep nested navigation menus?

Question

I have an app that I am creating for a customer that at some points has 6 levels of navigation. Basically our user wants to select an item from a navigation. that will lead to another set of navigation, that will lead to another set of navigation and so on until you are 6 levels deep in on navigation property.

Some of the menu items do not go that far some in fact do not have sub menu's.

To make matters even more complicated some of the links are required to have descriptions of what report the link leads to. The caveat here is that some of the descriptions are 15 lines long, basically huge paragraphs of text.

I have tried the on hover open the sub menu but when you get down to the sixth level if you move your mouse a hair too much your going back in and treeing them out again.

I tried the accordion method from twitter bootstrap but that didn't work because on the 6 level menu's most of the navigation was pushed off the page.

I tried using XML to populate drop-down lists where basically the user would click a link and the "sublinks" would appear in a partial view with a drop-down list. and that continued until you were at the lowest level. The problem is I run out of screen real estate with 6 drop down lists and a description.

Anyone have any suggestions on what else I can do with an app like this?

Answer 1

Drill Down Menus - iPod Style

A simple solution is never to display one or more nested at once using CSS styling, there is many menus that you can achieve this with and just an example of something I've used before in my designs that involved heavily nested menus is using a iPod style of menu. Take a look for yourself, displays as many nests as you like while keeps everything easy to use and looks pretty cool too.

You can check the source and other demo online here: jQuery iPod style and flyout menus, if your using WordPress then this has already been ported here. Also its worth noting that you can have many menus on the page operating the same so while you look at demo yes you see one drop down effective but you can have many working in a 'menubar' along side each other which would be very fitting for this situation.

More Examples of Drill Down Menus

• EireMedia - Drill Down
• Dynamic Drive - Drill Down Menu 1.6
• Createit-PL Drill Down Premium