Grow your CSS skills. Land your dream job.

Vertical menu: combine flyouts and strict vertical layout

  • # June 6, 2013 at 4:18 pm

    I’m working on a site template that has a vertical menu and would like to combine flyout menus with a strict one-column vertical navigation.

    Right now each submenu ul is in flyout menu that opens when the parent li is hovered, like this:

    Home
    ABOUT


    > -History
    Blog -Staff
    Contact -Products

    Pretty typical. The problem: if you’re on the History page (so History is the active menu item), the History menu item is hidden in the flyout menu. In other words, you can’t look at the menu and see what page you’re on.

    If I’m on the History page, I want the submenu ul to appear below the parent li instead of in a hidden flyout menu, like this:

    Home
    About
    -HISTORY
    -Staff
    -Products
    Blog
    Contact

    This way, I look at the menu and know I’m on History. I would want this trend to continue, so that if History has subpages, they appear in a flyout menu when I hover:

    Home
    About
    -History


    > -1980-1990
    -Staff
    -Products
    Blog
    Contact

    But when I’m on a sub page (1980-1990, for example), the heirarchy is apparent in the side menu:

    Home
    About
    -History
    -1980-1990
    -Staff
    -Products
    Blog
    Contact

    I’ve tried keeping everything in a vertical menu, so that when you hover top-level li all of the subpages show up below it, but this makes for clumsy usability, as the menu is constantly changing shape as you hover. It seems like a combination of flyout menus for hovering and a strictly vertical format for active pages would be best.

    But I’m stuck. Anyone have ideas on how to make this work? Can it be done with css alone?

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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