Operation Manual

407

USING DREAMWEAVER

Building Spry pages visually

Last updated 3/28/2012

Note: If your site already has a vertical Menu Bar widget somewhere else, you don’t need to insert a new one. You can

simply attach the SpryMenuBarVertical.css file to the page instead by clicking the Attach Style Sheet button in the CSS

Styles panel (Windows

> CSS Styles).

3 Delete the vertical Menu Bar.

4 In Code view (View > Code), locate the MenuBarHorizontal class and change it to MenuBarVertical. The

MenuBarHorizontal class is defined in the container

ul tag for the menu bar (<ul id="MenuBar1"

class="MenuBarHorizontal">).

5 After the code for the menu bar, locate the menu bar constructor:

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",

{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",

imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

6 Remove the imgDown preload option (and comma) from the constructor:

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",

{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

Note: If converting from a vertical menu bar to a horizontal one, add the imgDown preload option and comma instead.

7 (Optional) If your page no longer contains any other horizontal Menu Bar widgets, delete the link to the former

MenuBarHorizontal.css file in the head of the document.

8 Save the page.

Customize the Menu Bar widget

Although the Property inspector enables you to make simple edits to a Menu Bar widget, it does not support

customized styling tasks. You can alter the CSS rules for the Menu Bar widget and create a menu bar that is styled to

your liking.

All CSS rules in the topics below refer to the default rules located in the SpryMenuBarHorizontal.css or

SpryMenuBarVertical.css file (depending on your selection). Dreamweaver saves these CSS files in the SpryAssets

folder of your site whenever you create a Spry Menu Bar widget. These files also contain useful commented

information about various styles that apply to the widget.

Although you can easily edit rules for the Menu Bar widget directly in the accompanying CSS file, you can also use the

CSS Styles panel to edit the menu bar’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to

different parts of the widget, especially if you use the panel’s Current mode.