Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Flyout Menu

Problem You want to create a flyout menu that can contain nested menus.

Solution You can use a division assigned to the menu class as the overall container for the menu. You
can insert a heading, such as

, as the first child of the division to be the menu title. You
can insert an unordered list assigned to the dropdown class to be the container for the drop-
down menu. You can insert list items to create menu items. For the content of a menu item,
you can insert an image followed by a link containing the menu item’s text.
To create a nested flyout menu, you can embed another unordered list assigned to the
submenu class inside a menu item assigned to the flyout-trigger class. When the user
mouses over the flyout-trigger menu item, it triggers the display of the flyout menu. You
can use a heading instead of a link to mark up the text of the flyout-trigger menu item.
To hide menus until the user activates them, you can assign unordered lists to the hidden
class. To put a separator between list items, assign the separator class to them.

Pattern^

HTML

^

MENU_TTTLE_CONTENT

• 
  
  MENU_ITEM_CONTENT

CSS .menu { float:left; position:relative; z-index:VALUE;
cursor:pointer; white-space:nowrap; }
.menu a { LINK_STYLES; }
.menu h3 { MENU_TITLE_BOX_STYLES; float:left; margin:0; }
.menu h3.hover { MENU_TITLE_HOVER_BOX_STYLES; }
.menu ul { MENU_CONTAINER_BOX_STYLES; position:absolute;
margin:0; padding:0; padding-bottom:BUFFER; }

.menu li { MENU_ITEM_BOX_STYLES; margin:0;

list-style-type:none; padding-left:LEFT_MENU_ITEM_PADDING; }

.menu li.hover { MENU_ITEM_HOVER_BOX_STYLES; }

.menu li.hover > a { MENU_ITEM_HOVER_LINK_STYLES; }

.menu li img { margin-left:-LEFT_MENU_ITEM_PADDING; }

.menu li.separator { margin-top:+VALUE; padding-top:+VALUE;

border-top:WIDTH STYLE COLOR; }

.menu li.flyout-trigger { background:FLYOUT_ARROW; }

.menu li.flyout-trigger.hover { background:HOVER_FLYOUT_ARROW; }

.menu ul.dropdown { top:100%; clear:left; }

.menu ul.submenu { left:100%;

margin-top:-1.5em; margin-left:-0.3em; }

.menu .hidden { left:-99999px; top:-99999px; }