Tutorial on Dreamweaver Fly-Out Menus

Dreamweaver's fly-out menus have never been so easy to create with CS3's new Spry framework. CS3's new set of tools creates drop-down menus, collapsible panels, tables and XML data sets. The Spry framework is based on JavaScript and provides simple and easy designs for Web designers. A fly-out menu allows you to display submenus when the users hovers over one of the buttons. This techniques allow for large amounts of navigational links in a small space.



(See reference 1)

Instructions

1. Open Dreamweaver and click "File," "New" and "HTML" for the file type. Insert a Spry menu by clicking on "Spry" from the main menu. Place your cursor where you want the menu and click on the "Spry Menu Bar" icon. Click on either "Horizontal" or "Vertical" and click "OK."

2. Replace the default text by clicking and dragging to highlight it. Type in the menu choices you want.

3. Click on the blue tab at the top left of the "Spry" menu to edit the text in the submenus. Add and remove items in the Properties panel by clicking the "+" and "-" sign.

4. Add links by clicking on the item in the Properties inspector and entering a URL in the Link field.

References

• Adobe: Menu Bar Widget Overview and Structure
• "Layers": Spry Navigation in Dreamweaver CS3