Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to make a vertical flyout menu 4 levels.

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #43494

    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

    #128722
    Paulie_D
    Member

    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.

    #128740

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

    #128742
    Paulie_D
    Member

    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?

    #128744
    Kitty Giraudel
    Participant

    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.

    #128745
    Paulie_D
    Member

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

    #128746
    Kitty Giraudel
    Participant

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

    #128748

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

    #128753
    Paulie_D
    Member

    Yeah I know but the basic principles are in there.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.