Operation Manual

404

USING DREAMWEAVER

Building Spry pages visually

Last updated 3/28/2012

You can also locate the rule by selecting the Accordion widget, and looking in the CSS Styles panel (Window > CSS

Styles). Make sure the panel is set to Current mode.

2 Add a width property and value to the rule, for example width: 300px;.

Working with the Spry 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.