Operation Manual

409

USING DREAMWEAVER

Building Spry pages visually

Last updated 3/28/2012

Position submenus

The position of Spry Menu Bar submenus is controlled by the margin property on submenu ul tags.

1 Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal

ul rule.

2 Change the margin: -5% 0 0 95%; default values to the desired values.

Working with the Spry Collapsible Panel widget

About the Collapsible Panel widget

A Collapsible Panel widget is a panel that can store content in a compact space. Users hide or reveal the content stored

in the Collapsible Panel by clicking the tab of the widget. The following example shows a Collapsible Panel widget,

expanded and collapsed:

A. Expanded B. Collapsed

The HTML for the Collapsible Panel widget comprises an outer div tag that contains the content div tag and the tab

container

div tag. The HTML for the Collapsible Panel widget also includes script tags in the head of the document

and after the Collapsible Panel’s HTML markup.

For a more comprehensive explanation of how the Collapsible Panel widget works, including a full anatomy of the

Collapsible Panel widget’s code, see

www.adobe.com/go/learn_dw_sprycollapsiblepanel.

Insert and edit the Collapsible Panel widget

Insert the Collapsible Panel widget

❖ Select Insert > Spry > Spry Collapsible Panel.

Note: You can also insert a Collapsible Panel widget by using the Spry category in the Insert panel.

Open or close the Collapsible Panel in Design view

❖ Do one of the following:

• Move the mouse pointer over the tab of the panel in Design view and click the eye icon that appears at the right of

the tab.

• Select a Collapsible Panel widget in the Document window, and then select Open or Closed from the Display pop-

up menu in the Property inspector (Window

> Properties).