Grow your CSS skills. Land your dream job.

How to make a vertical flyout menu 4 levels.

  • # March 19, 2013 at 5:24 am

    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

    # March 19, 2013 at 7:21 am

    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.

    # March 19, 2013 at 7:53 am

    @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.

    # March 19, 2013 at 8:26 am

    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?

    # March 19, 2013 at 8:29 am

    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.

    # March 19, 2013 at 8:39 am

    >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. :)

    # March 19, 2013 at 8:47 am

    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).

    # March 19, 2013 at 8:59 am

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

    # March 19, 2013 at 9:56 am

    Yeah I know but the basic principles are in there.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".