CHAPTER 17 ■ LAYOUTSFlyout Menu cont.^
Location This pattern works anywhere a list can be used.
Styles You can float the drop-down menu and its title to the left to shrinkwrap the menu and to
stack multiple drop-down menus next to each other. You can assign position:relative to
the drop-down menu so the unordered list can be absolutely positioned in relation to it. If
you have other relatively positioned content, you can set z-index to a high-enough value to
move the menu to the front. You can use white-space:nowrap to ensure that list items
aren’t wrapped across multiple lines.
You can remove all the default margins and padding on headings, lists, and list items. You
can use list-style-type:none to remove all bullets from list items. You can create extra
left padding inside each list item so you can move images into this area with a negative left
margin. This keeps images and text aligned in two columns when there is no image in a
menu item.
You can position a drop-down menu below its title by setting top to 100%. You can position
a flyout menu to the right of its flyout-trigger element by setting left to 100%. You can
compensate for a flyout menu being positioned lower than its flyout-trigger by using
margin-top:1.5em to raise it. You can use margin-left:-0.3em to overlap the flyout menu
over its parent menu; use em measurements because they scale with the text when the user
zooms in. You can hide menus by moving them off screen.
You can apply box styles to the following menu elements: h3, ul, and li.
JavaScript The first three functions add, remove, or toggle the presence of the hidden class, which
determines whether the drop-down menu is visible or not. Because the hidden class simply
moves the menu off the screen, it’s completely accessible to screen readers.
The next two functions add or remove the hover class from menu items and the menu title.
The hover class can be used to create hover effects. This is more reliable than the hover
pseudo class, which isn’t fully implemented in Internet Explorer 6.
The last two functions add or remove the hidden class of submenus when the user hovers
over a menu item assigned to the flyout-trigger class. Notice that the
applyToDescendants selector, '> *.submenu', contains a child selector to limit the scope to
just the child submenu rather than all descendant submenus. Even though Internet
Explorer 6 doesn’t support the child selector, it works in this code because the jQuery
library supports all CSS selectors.
Limitations Single-level menus work fine, but nested menus have limitations. Nested menus don’t work
well on touchscreen devices because they require a mouseover to work, and touchscreens
don’t have a hover state. Because nested menus are absolutely positioned, they don’t adapt
to narrow displays. Finally, menus don’t fly out when JavaScript isn’t available.
Related to Event Styling; Absolute Box, Floated Box (Chapter 4); Width, Height, Shrinkwrapped,
Stretched (Chapter 5); Margin, Border, Padding, Background, Overflow (Chapter 6);
Positioned, Atomic, Absolute, Relative, Float and Clear, Relative Float (Chapter 7); Offset
Absolute and Offset Fixed, Aligned Outside (Chapter 8); Left Aligned (Chapter 9);
Screenreader-only (Chapter 10); Blocked, Nowrap, Inline Decoration (Chapter 11); Section,
Lists (Chapter 13)