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?
