How to make a vertical flyout menu 4 levels.

[CarraraWebsiteSolutions]

Hello. I have my basic menu that I know how to make a single flyout menu but would like to have it so can fly out for 4 sub levels sample code here http://codepen.io/mwbcomputers/pen/Hvhil

[Paulie_D]

That Codepen has no HTML.

I would say that a menu with 4 (or 5 levels as you seem to require) is really not a good idea. It’s going to overwhelm the user with complexity.

At best I would say that 3 levels should be more than enough.

If you really need that level of detail you would be better off taking the user from a top or 2nd level choice to a separate page with a second menu. As long as there is a breadcrumb trail so they can navigate their way back you should be fine.

[CarraraWebsiteSolutions]

@Paulie_D

I think you are right three levels are OK I just don’t know how to make it third level is there a place where I can read about it.

[Paulie_D]

I don’t know of any specific tutorials but I keep this around which has some comments on what the CSS is doing.

http://codepen.io/Paulie-D/pen/BbjFa

3rd level is under ‘Clients’.

It’s not perfect but it might help.

EDIT: Hmmm…I’ll have to work on a vertical one. Shouldn’t be too hard, should it?

[Kitty Giraudel]

In my opinion even 3 levels is too much (but acceptable). You could probably think of a way to make it fit into 2 levels. Take a look at huge websites with a complicated nested navigation like Amazon: most of the time it takes 2 levels.

[Paulie_D]

>Take a look at huge websites with a complicated nested navigation like Amazon: most of the time it takes 2 levels.

Indeed, hence

>If you really need that level of detail you would be better off taking the user from a top or 2nd level choice to a separate page with a second menu. As long as there is a breadcrumb trail so they can navigate their way back you should be fine.

Although I suspect Amazon do it with filter logic and who lot of database management. :)

[Kitty Giraudel]

Probably.

Anyway, having to dig into a 4-levels navigation is kind of bad UX. Especially if relies on mouseover, which is getting completely awful after the first level (unless you involve some JS to improve usability).

[CarraraWebsiteSolutions]

Hello @Paulie_D I was talking about vertical nav. I will find out some more I will play around.

[Paulie_D]

Yeah I know but the basic principles are in there.

[Author]

Posts