5 level nested menu

Menu with 5 levels of nesting

[peten]

Hi folks .

I am having a lot of a brain fart right now i need a menu horizontal or vertical that can carry up to 5 levels of nesting and i just can not crack it .

Suggestions or pointers very welcome


Thanks

Pete .

[lucy24]

Would it be any use to say: Think of a different approach? When I see the words "nested menus" I immediately think of those nightmarish sites where if my mouse strays by 1mm, all the menus slam shut and I have to start all over again. One nest, OK. Two at the outside. Five?! Ouch, ouch.

a menu horizontal or vertical

That's backward. First work out exactly what you want the user to see. Then you can code it. But with that many sub-layers, menus may not even be what you want. It sounds more like subsidiary pages.

[peten]

Hi .

yes i have looked at smaller menus and more pages but am up against the club committee who want basically to be able to access almost everything from the front page ..
As for the horizontal versus vertical i have page designs that can use either with little work the present system uses right side vertical it formerly used left side vertical i has used top horizontal .

My big problem is that i have a huge amount of photo gallery's stretching back some 7 years this years collection so far amounts to 8 gallery's hence the need for the nesting ..

Pete .

[Fotiman]

First work out exactly what you want the user to see

I would argue the opposite. Think of the semantics first, mark it up appropriately, then style it accordingly.

For a menu with various levels of nesting, start with the basics.

<ul>
  <li>
    A-1
    <ul>
      <li>
        A - 2
        <ul>
          <li>
            A - 3
            <ul>
              <li>
                A - 4
                <ul>
                  <li>
                    A - 5
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    B - 1
    ...
  </li>
</ul>

That's the basic structure for nested menus. That basic structure can be styled for either horizontal or vertical layout.

With that said, there are other patterns that you might be able to use. For example, would an accordion control make more sense? Or something like a display collection (https://developer.yahoo.com/ypatterns/social/objects/collecting/displaying.html)? Being able to access everything from the front page should not come at the expense of usability and the user experience.

[ergophobe]

This might be a case where a mega-menu makes sense. So you would have a top horizontal nav which drops down and each item has X columns and each column has a set of items with a title and then a list. That's 4 levels

- navbar
- mega menu column headers
- titles within columns
- lists below titles

I think this is a collossally bad idea and going to 5 levels is even worse, but I understand this is not your call.

Last year I developed a menu that was a dropdown (level 1) mega with a tabbed sidebar (level 2) that changed out the main menu box on hover which had columns (level 3) and within the columns categories (level 4) and items (level 5).

I thought this would have bad usability and so did the designer and, of course, it is not a pattern that translates to mobile, so it would require a different mobile interface. This was one of those things where a person of power just loved the idea at first, but eventually realized it was not going to work and we went with a simpler, three-level Superfish menu.

[ergophobe]

PS - I like the way the Foundation topbar does menus that translate well to mobile, but I've never gone past three levels. You might want to check it out and see if you like it. Bootstrap might have something too.

[tangor]

Does the site topic require five levels? Site page is top, of course, but not everyone come there via SERP, but a link back to home makes sense...

I just look at how many levels are required for red widgets in all variations (can't think of that many).

Topic
-- Item
--- er, pushing it
---- really pushing it
----- this gets ridiculous
------ approaching scientific taxonomy
-------- achieved scientific taxonomy

Somewhere along the mighty menu folks will opt out.

Hopefully the serps will take the visitor to the right page without your menu (that's what spiders are for)

[peten]

Not been able to get back to comment sooner sorry folks but solverd the problem with smartmenus "http://www.smartmenus.org"

Has caused me another problem but one i can get round if needed

Thanks all