|
Page 1 of 4 Overview
There are currently two common methods for placing drop-down and fly-out (or slide-out) menus in web designs. One is to use CSS (cascading style sheets) that place the menus and sub-menus when the mouse or other pointing device is held over a top-level menu item. The second is to capture mouse events and use Javascript to display and hide the menus.
CSS placement has the advantage that sub-menus can still function even if Javascript is not supported by the user's browser or has been disabled. It's disadvantage is that sub-menu items may appear beyond the current browser window edges, making them partially or completely inaccessible.
Use of Javascript has the advantage that sub-menus can be placed intelligently, taking into account where it appears in relation to the window edges. The disadvantage is that sub-menus will not appear at all if Javascript is disabled or not supported.
Brian Katzung of Kappa Computer Solutions, LLC has developed a "smart", CSS/Javascript hybrid menu system called "menuposition" which combines the best of both approaches: basic CSS-based positioning when Javascript is not available or is disabled, and edge-aware Javascript-based positioning when Javascript is available and enabled.
Javascript is also used to overcome a "z-index" stacking issue in
Internet Explorer that arises if sub-menus can overlap other menus
(e.g. if top navigation drop-downs can overlap left-side navigation and
left-side slide-outs can overlap top navigation).
|
