All geek questions in one place

How to work with deeply nested navigation menus?

I have an application that I create for a client, which at some points has 6 levels of navigation. Basically, our user wants to select an item from the navigation. which will lead to another set of navigation, which will lead to another set of navigation, and so on, until you reach 6 levels in the navigation properties.

Some menu items do not go, some of them actually do not have submenus.

To further complicate the work, some links should contain descriptions of which message the link refers to. The caveat here is that some of the descriptions are 15 lines long, mostly huge paragraphs of text.

I tried moving the cursor to open the submenu, but when you go to the sixth level, if you move the mouse too much, you go back and take them out again.

I tried the accordion method from the twitter bootstrap, but that did not work, because in the level 6 menu most of the navigation was dropped from the page.

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

Anyone have any suggestions on what else I can do with such an application?

+4
source share
1 answer

Expanded Menus - iPod Style

A simple solution never displays one or more nested at the same time using CSS styles, there are many menus with which you can achieve this, and just an example of what I used earlier in my projects that involve heavily nested menus. using the iPod style on the menu. Take the search for yourself , displays as many nests as you like, while everything is easy to use and looks pretty cool.

You can check the source and other demos online here: jQuery iPod style and drop-down menus , if you are using WordPress, this has already been ported. It’s also worth noting that you can have many menus on the page that work the same way, so while you look at the demo yes, you see that one reducing effect is effective, but you can work a lot in the “menu” next to each other, which It would be very suitable for this situation.

Additional drilling menu examples

+9
source

Source: https://habr.com/ru/post/1469330/

More articles:


All Articles