Operation Manual

Working with the Spry Menu Bar widget
To the top
To the top
Note:
Note:
About the Menu Bar widget
Insert and edit the Menu Bar widget
Customize the Menu Bar widget
About the Menu Bar widget
A Menu Bar widget is a set of navigational menu buttons that display submenus when a site visitor hovers over one of the buttons. Menu Bars let
you display a large amount of navigational information in a compact space, and also give visitors to the site a sense of what is available on the site
without having to browse it extensively.
Dreamweaver lets you insert two kinds of Menu Bar widgets: vertical and horizontal. The following example shows a horizontal Menu Bar widget,
with the third menu item expanded:
Menu Bar widget (consists of <ul>, <li>, and <a> tags)
A. Menu item has submenu B. Submenu item has submenu
The HTML for the Menu Bar widget comprises an outer ul tag that contains an li tag for each of the top-level menu items. The top-level menu
items (li tags) in turn contain ul and li tags that define submenus for each of the items, and submenus can likewise contain submenus. Top-
level menus and submenus can contain as many submenu items as you like.
For a more comprehensive explanation of how the Menu Bar widget works, including a full anatomy of the Menu Bar widget’s code, see
www.adobe.com/go/learn_dw_sprymenubar.
For a tutorial on creating a Spry Menu Bar, see www.adobe.com/go/vid0168.
Insert and edit the Menu Bar widget
Insert the Menu Bar widget
1. Select Insert > Spry > Spry Menu Bar.
2. Select Horizontal or Vertical, and click OK.
You can also insert a Menu Bar widget using the Spry category of the Insert panel.
The Spry Menu Bar widget uses DHTML layers to display sections of HTML on top of other sections. If your page contains content created
with Adobe Flash, this might cause a problem because SWF files are always displayed on top of all other DHTML layers, so the SWF file might be
displayed on top of your submenus. The workaround for this situation is to change the parameters for the SWF file to use
wmode="transparent". You can easily do this by selecting the SWF file in the Document window, and setting the wmode option in the Property
inspector to transparent. For more information, see www.adobe.com/go/15523.
Add or delete menus and submenus
Use the Property inspector (Window > Properties) to add or delete menu items to and from the Menu Bar widget.
Add a main menu item
1. Select a Menu Bar widget in the Document window.
2. In the Property inspector, click the plus button above the first column.
3. (Optional) Rename the new menu item by changing the default text in either the Document window or the Text box of the
Property inspector.
Add a submenu item
258