Spry User Guide - Support - Adobe

3 Locate the MenuBarHorizontal class in the HTML code for the horizontal menu bar, and change it to MenuBarVertical.
The MenuBarHorizontal class is defined in the container ul tag for the menu bar ().
4 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"});
5 Remove the imgDown preload option (and comma) from the constructor:
var menubar1 = new Spry.Widget.MenuBar("menubar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
Note: If you are converting from a vertical menu bar to a horizontal menu bar, add the imgDown preload option and
comma instead.
6 (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.
7 Save the page.
Customize the Menu Bar widget
The SpryMenuBarHorizontal.css and SpryMenuBarVertical.css files provide the default styling for the Menu Bar
widget. You can, however, customize the widget by changing the appropriate CSS rule. The CSS rules in the
SpryMenuBarHorizontal.css and SpryMenuBarVertical.css files use the same class names as the related elements in
the menu bar’s HTML code, so it’s easy for you to know which CSS rules correspond to the different sections of the
Menu Bar widget. Additionally, the SpryMenuBarHorizontal.css and SpryMenuBarVertical.css files contain class
names for behaviors that are related to the widget (for example, hovering and clicking behaviors).
The horizontal or vertical styling sheet for the widget should already be a included in your website before you start
customizing. For more information, see “Prepare your files” on page 3.
Style a Menu Bar widget (general instructions)
You can style an Menu Bar widget by setting properties for the entire Menu Bar widget container, or by setting
properties for the components of the widget individually.
1 Open the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file.
2 Locate the CSS rule for the part of the menu bar to change. For example, to change the background color of the toplevel
menu items, edit the ulMenuBarHorizontal a or ulMenuBarVertical a rule in the SpryAccordion.css file.
3 Make your changes to the CSS and save the file.
You can replace style-related class names in the CSS files and HTML code with class names of your own. Doing so
does not affect the functionality of the widget.
The SpryMenuBarHorizontal.css and SpryMenuBarVertical.css files have extensive comments, explaining the code
and the purpose for certain rules. For further information, see the comments in the file.
SPRY
User Guide
42