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.

For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprymenubar_custom.

For a tutorial on performing the most common styling tasks, see David Powers’s Customizing a Spry Menu Bar.

For more Web resources about customizing the Menu Bar widget, see Ryan Grabenstein’s Customizing Spry Menu Bars in Dreamweaver.

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.

Change text styling of a menu item

The CSS attached to the <a> tag contains the information for text styling. There are also several relevant text styling class values attached to the <a> tag that pertain to different menu states.

 To change the text styling of a menu item, use the following table to locate the appropriate CSS rule, and then change the default value:

Style to change

CSS rule for vertical or horizontal menu bar

Relevant properties and default values

Default text

ul.MenuBarVertical a, ul.MenuBarHorizontal a

color: #333; text-decoration: none;

Text color when mouse pointer moves over it

ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover

color: #FFF;

Text color when in focus

ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus

color: #FFF;

Menu Bar item color when mouse pointer moves over it

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover

color: #FFF;

Submenu item color when mouse pointer moves over it

ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

color: #FFF;

Change the background color of a menu item

The CSS attached to the <a> tag contains the information for a menu item’s background color. There are also several relevant background color class values attached to the <a> tag that pertain to different menu states.

 To change the background color of a menu item, use the following table to locate the appropriate CSS rule, and then change the default value:

Color to change

CSS rule for vertical or horizontal menu bar

Relevant properties and default values

Default background

ul.MenuBarVertical a, ul.MenuBarHorizontal a

background-color: #EEE;

Background color when mouse pointer moves over it

ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover

background-color: #33C;

Background color when in focus

ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus

background-color: #33C;

Menu Bar item color when mouse pointer moves over it

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover

background-color: #33C;

Submenu item color when mouse pointer moves over it

ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

background-color: #33C;

Change the dimension of menu items

You change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.

  1. Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
  2. Change the width property to a desired width (or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule).
  3. Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
  4. Change the width property to a desired width (or change the property to auto to remove a fixed width).
  5. Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule:
  6. Add the following properties to the rule: float: none; and background-color: transparent;.
  7. Delete the width: 8.2em; property and value.

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.