Flyout Menus

Flyout (or popup) menus are navigational menus where a mouseover of an item in one menu makes a submenu visible. They can be achieved through a combination of JavaScript and CSS, or purely with CSS.

JavaScript and CSS Method

In Dreamweaver MX, MX 2004 and Dreamweaver 8, one could create a popup menu by selecting the link for the pop-up menu, opening up the Behaviors panel (Window>Behaviors if not already showing) and click the + sign and select Show Pop-Up Menu. This was implented through a combination of JavaScript and CSS.

In Dreamweaver CS3, this apparently has been replaced by the Accordion Widget. To use this, position the insertion point where you want the menu to begin and click the Spry tab on the Insert Bar.

CSS-Only Method

This relies on two little used features of CSS:

The approach used here is to use an unordered list where the first level list items are the first level navigational items, and the second level navigational items are unordered lists nested within the top level unordered list. The navigational menu is shown below.

One creates a style rule that will not display the bulletpoints. This is done by using a style rule of #leftnav ul li {list_style:none} This rule will only apply to the unordered lists in the context of the leftnav id. One also has a rule of #leftnav {list_style:none}