Operation Manual

Note:
To the top
Change the orientation of a Menu Bar widget
You can change the orientation of a Menu Bar widget from horizontal to vertical, and vice versa. All you need to do is alter the HTML code for the
menu bar and make sure you have the correct CSS file in your SpryAssets folder.
The following example changes a horizontal Menu Bar widget to a vertical Menu Bar widget.
1. In Dreamweaver, open the page that contains a horizontal Menu Bar widget.
2. Insert a vertical Menu Bar widget (Insert > Spry > Spry Menu Bar) and save the page. This step ensures that the correct CSS
file for a vertical menu bar is included in your site.
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.
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
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.
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
color: #FFF;
260