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.

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.

Open the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file.
Locate the CSS rule for the part of the menu bar to change. For example, to change the background color of the top-level menu items, edit the ulMenuBarHorizontal a or ulMenuBarVertical a rule in the SpryAccordion.css file.
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.

Change text styling of a menu item

The CSS code attached to the a tag contains the information for text styling. Several relevant text-styling class values that pertain to different menu states are attached to the a tag.

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 rule attached to the a tag contains the information for a menu item’s background color. Several relevant background color class values are 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

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

Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
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.
Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the width property to a desired width (or change the property to auto to remove a fixed width).
Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
Add the following properties to the rule: float: none; and background-color: transparent;.
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.

Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the margin: -5% 0 0 95%; default values to the desired values.

Center a Menu Bar widget

By default, the Menu Bar widget, as well as its menu and submenu items, are all aligned left on the page. You can center the Menu Bar widget itself by adding some code to the page on which the Menu Bar widget appears.

The example demonstrates centering a horizontal Menu Bar widget, but you can center a vertical Menu Bar widget within its container if you are using one.

Note: If you want to center Menu Bar widgets on more than one page, you might want to integrate your changes into the CSS style sheet. Keep in mind, however, that all pages linked to that style sheet will reflect your changes.

Add a style block to your page after the link to the Menu Bar widget’s CSS style sheet.
```
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
```
The rule you add to this style block will override some of the default rules in the style sheet.

Specify a new ul.MenuBarHorizontal rule in the style tag, specify a width, and add the margin:auto property and value, as follows:

<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Give the menu bar a width and set the margins to "auto"
 * so that the browser does the centering.
 */
ul.MenuBarHorizontal {
	width: 32.2em;
	margin: auto;
}
-->
</style>

For a working example, see the Menu Bar widget centering page on Adobe Labs.

Center menu items

By default, the Menu Bar widget, as well as its menu and submenu items, are all aligned left on the page. You can center the menu items inside the menu bar by adding some code to the page on which the Menu Bar widget appears. This task does not center the submenu items.

The example demonstrates centering a horizontal menu bar’s menu items, but you can also apply this to a vertical Menu Bar widget if you are using one.

Note: If you want to change the styling of Menu Bar widgets on more than one page, you might want to integrate your changes into the CSS style sheet. Keep in mind, however, that all pages linked to that style sheet will reflect your changes.

Add a style block to your page after the link to the Menu Bar widget’s CSS style sheet.
```
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
```
The rule you add to this style block will override some of the default rules in the style sheet.

Specify new ul.MenuBarHorizontal a and ul.MenuBarHorizontal ul a rules, and add properties to align the text, as follows:

<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Center the text within all menu item links.
 */
ul.MenuBarHorizontal a {
	text-align: center;
}
/* Set the the alignment back to left for any
 * menu item links that are in a sub menu.
 */
ul.MenuBarHorizontal ul a {
	text-align: left;
}
-->
</style>

For a working example, see the Menu Bar widget centering page on Adobe Labs.

Center all menu items

By default, the horizontal Menu Bar widget, as well as its menu and submenu items, are all aligned left on the page. You can center all of the menu items inside the menu bar by adding some code to the page on which the Menu Bar widget appears. This task centers all menu items and submenu items.

The example demonstrates centering all menu items in a horizontal menu bar, but you can also center all items in a vertical Menu Bar widget if you are using one

Add a style block to your page after the link to the Menu Bar widget’s CSS style sheet.
```
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
```
The rule you add to this style block will override some of the default rules in the style sheet.

Specify a new ul.MenuBarHorizontal a rule that centers all links, as follows:

<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Center the text within all menu item links. This
 * causes the text in menu items for both the menu bar and
 * sub menus to center.
 */
ul.MenuBarHorizontal a {
	text-align: center;
}
-->
</style>

For a working example, see the Menu Bar widget centering page on Adobe Labs.

Comments

Man_In_A_Box said on May 3, 2007 at 9:40 AM :

I've attempted to create a menubar with the Spry features. I set the
submenu to a horizontal bar. In FireFox and Safari, the submenu bars drop
into the correct place and function properly. Pull up the page in IE 6 or 7
and the submenues appear up and off the page to the left and above the
menu bar. Knowing IE, is there a setting I'm missing to fix it for IE viewers?
Thanks.

No screen name said on May 3, 2007 at 12:28 PM :

Can someone help me make transparent backgrounds for the horizontal menu bar to work for IE. It works for Firefox and safari. The submenu positions also do not show properly as they pop up to the top and not the bottom in IE.

Donald Booth said on May 4, 2007 at 11:11 AM :

We have a fix for the IE shift issue. It will be fixed for Spry 1.5, but in the meantime we have put the js file with the fix on Labs:
http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js
Replace your current JS with this new file and it should fix it.

No screen name said on May 6, 2007 at 9:09 PM :

Hi,
I'm also new at this but when I try to change the backgound colour of a menu item it does not work. I have tired a variety of colours to no avail. I can cahnge the colour of the page in page properties, but not for the menu items.
My first attempt to change a number of menu items (Hold down shift etc) resulted in an error and program crash.
Can you help.

No screen name said on May 10, 2007 at 4:25 PM :

I am new to the Spry menus and I am having a problem with a horizontal
drop down menu. I attempted to change the color/size of the buttons, but
now whenever I try to view it in the browser, it dipplays the menu vertically
in the center of the page - even after I deleted all files and started from
scratch. What am I missing?

No screen name said on May 10, 2007 at 7:27 PM :

Dreamweaver CS3 allows me to change the text color and background color of submenu items. What about borders? In MX I could create borders for individual submenu items and now it appears that feature is gone. I see the container border for all submenu items, but I would like a border around each item.

Fuhrfan1 said on May 16, 2007 at 8:14 AM :

I've implemented a Horizontal menu but have the need to change the size of two different submenus. The first submenu has labels that are between 15 - 30 letters long, with the second submenu with labels 10 letters or less. So I would like to shorten up the length of the second menu so there isn't so much white space. Is there a way to do this? Maybe by adding a second submenu class?

kinblas said on May 16, 2007 at 11:17 AM :

"I'm also new at this but when I try to change the backgound colour of a menu item it does not work. I have tired a variety of colours to no avail. I can cahnge the colour of the page in page properties, but not for the menu items."

With the default MenuBar stylesheet, the background color of a menu-item comes from the <a> tag. Try selecting the <a> of the menu item you want to change, and then change the background-color. You can also go into the CSS file and modify the background colors for *all* menu items by looking for the rules that look like this:

ul.MenuBarHorizontal a {
...
}

and make your background-color modifications there.

--== Kin ==--

kinblas said on May 16, 2007 at 3:44 PM :

Replying to: No screen name said on May 10, 2007 at 4:25 PM

"I am new to the Spry menus and I am having a problem with a horizontal drop down menu. I attempted to change the color/size of the buttons, but now whenver I try to view it in the browser, it dipplays the menu vertically in the center of the page - even after I deleted all files and started from scratch. What am I missing?"

I'd really have to see your page to give you a concrete answer, but I suspect that your menubar is sitting in a container that has a width specified on it that is not wide enough to contain all of the menu items on a single line. Try setting the background color of the parent elements for the menubar to visualize/debug how wide things are.

--== Kin ==--

kinblas said on May 16, 2007 at 3:47 PM :

Replying to: Man_In_A_Box said on May 3, 2007 at 9:40 AM

"I've attempted to create a menubar with the Spry features. I set the
submenu to a horizontal bar. In FireFox and Safari, the submenu bars drop into the correct place and function properly. Pull up the page in IE 6 or 7 and the submenues appear up and off the page to the left and above the menu bar. Knowing IE, is there a setting I'm missing to fix it for IE viewers?"

Would it be possible to see your page, or a paired down sample that shows the problem? In particular, I am interested in seeing if you are positioning any of the parent elements of the menubar, or if you have changed the position property of the menubar/submenus.

--== Kin ==--

kinblas said on May 16, 2007 at 3:50 PM :

Replying to: No screen name said on May 10, 2007 at 7:27 PM

"Dreamweaver CS3 allows me to change the text color and background color of submenu items. What about borders? In MX I could create borders for individual submenu items and now it appears that feature is gone. I see the container border for all submenu items, but I would like a border around each item."

You are free to style any aspect of the menubar you wish. If you want to place borders on the menu items, try adding CSS border properties to either the <li> or <a> elements.

--== Kin ==--

kinblas said on May 16, 2007 at 4:08 PM :

Replying to: Fuhrfan1 said on May 16, 2007 at 8:14 AM

"I've implemented a Horizontal menu but have the need to change the size of two different submenus. The first submenu has labels that are between 15 - 30 letters long, with the second submenu with labels 10 letters or less. So I would like to shorten up the length of the second menu so there isn't so much white space. Is there a way to do this? Maybe by adding a second submenu class?"

You can define a class name to place on the 2nd submenu's <ul> element, and then define contextual selectors that override the default widths. Perhaps something like:

ul.MySmallerSubMenu {
width: 4em;
}
ul.MySmallerSubMenu li
{
width: 100%;
}
ul.MySmallerSubMenu li a
{
width: 100%;
}

--== Kin ==--

karonz said on Jun 1, 2007 at 12:37 PM :

http://www.nmprc.state.nm.us/pr.htm

I have a great page with lots of spry, but the submenu items are tucking under instead of staying on top, does anyone know how to fix?
btw...its in both IE and FF

kinblas said on Jun 5, 2007 at 1:59 PM :

In response to karonz:

I originally answered karonz's question in the Spry Forum posting:

http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid=1272857&enterthread=y

But for the sake of others I'll post the answer directly here:

Hi karonz,

It looks like you added a z-index property to this rule in SpryMenuBarVertical.css:

ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
z-index: auto;
}

If you remove it, that gets you working properly in all browsers *except* IE. For IE, you have an additional IE bug you are running into which has to do with the fact that your leftnav, which contains the menubar, is position:absolute ... there is a bug in IE where positioning an element causes IE to create a new z-index context for it which basically makes all z-index properties for elements underneath that positioned element relative to the stacking order of the positioned element.

To get around that bug, simply add a z-index value to your #leftnav rule in style4.css:

#leftnav {
padding: 7px 5px 5px;
width: 158px;
float: left;
height: auto;
position: absolute;
z-index: 20;
}

--== Kin ==--

blackbream said on Jun 14, 2007 at 3:35 AM :

Is it possible to use a background image with the spry menu system? Tried to make it work but can't.

jonmichael said on Jun 14, 2007 at 11:36 AM :

Hi Richard,
Check out Menu Bar sample for a version with bgimages. It is definitely possible.
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html

jonmichael said on Jun 22, 2007 at 5:12 PM :

To all Spry users:

Please note that you might get a faster (and better) response to your query if you post it on the Spry forum at:

http://www.adobe.com/go/labs_spry_pr1_forum

The Spry forum is a place where the entire Spry community can chime in and help you solve your problem.

Thanks,

Jon Michael Varese
Adobe Systems, Inc.

No screen name said on Jun 26, 2007 at 10:03 AM :

Is their a way to change the display speed of the submenu's. their seems to be about a 1 to 1-1/2 second delay and i would like to modify that. thanks in advance.

jonmichael said on Jun 26, 2007 at 1:27 PM :

The menu speed is not an option that you can set, but if you look at the bottom of the SpryMenuBar.js file, you can see the delay times set in milliseconds: 250 for showing it and 600 for hiding it.

The Spry forum at the URL above is a good place to ask these sorts of technical questions.

StonyHodes said on Jun 27, 2007 at 9:58 AM :

For everyone who is having problems with the horizontal or vertical menu with sub menus flying out to various positions on the page in Internet Explorer...when editing the SpryMenuBarVertical.css make sure you stick with using em instead of px when changing widths. That worked for me.

No screen name said on Jun 29, 2007 at 9:38 AM :

I'm having problems positioning sub-submenus correctly; no matter what margins I specify in the CSS file in "ul.MenuBarVertical ul", the position remains unchanged.

Moreover, when you have a deep navigation tree (i.e. several levels of sub-menus), the widget keeps drawing it to the right of the parent and even moves off-screen. There is no detection of window borders and automatic wrapping, and since I cannot position the submenus to my liking, right now I'm stumped.

Pity, since Spry is pretty neat and we'd like to use it in conjunction with Flash/AS/Flex as well - any advice is welcome.

I run 1440x900 screen resolution, but it still manages to get too wide - see

http://lunatics.at/downloads/spry-menubar-too-wide.png

for a screenshot. Since it's an internal dev site, no live preview. CSS is back to stock, Menubar4 as template.

Regards,
Simon

No screen name said on Jun 29, 2007 at 4:58 PM :

Well,
Spry isn't at fault after all - I managed to fix it after taking a break for brainstorming.

I simply misinterpreted the menu orientation (Vertical as I first read it was the submenus opening under the menu headers), and then just didn't think about it anymore.

Basically, all it took was editing the correct css file - Horizontal - instead.

Using 1.5 preview, it formats correctly in FF 2.0, IE 6 and IE 7 (haven't tested more browsers).

Spry works fine, Problem exists between keyboard and chair.

Regards,
Simon.

lheidner said on Mar 14, 2008 at 6:35 AM :

Anyone knows how to get rid of the arrows that i in the menubar?

I've tried to remove the cursor properties, but obviously it wasn't ahtw put the
arrows after every title in the bar.

Anyone knows? or where to find answer...

Donald Booth said on Mar 14, 2008 at 7:58 AM :

To remove the arrows from the Menu Bar, edit the :
ul.MenuBarHorizontal a.MenuBarItemSubmenu

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover

rules.
They are CSS background images.
Hope this helps.
Donald Booth
Adobe Spry Team

jase30 said on Aug 21, 2008 at 1:38 AM :

does anyone have any idea how i can stop the text in my menu bar from
cutting off short of the full word?

Example at www.aristacomputers.com

Thanks

jonmichael said on Nov 12, 2008 at 5:16 PM :

If you look at the CSS file for your menubar you should see 2 rules that look like this:

/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
left: auto;
}
/* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {
width: 8.2em;
}

Change the width: 8.2em in both rules to a larger width that will accommodate your longest string.

Current page: http://livedocs.adobe.com/en_US/Spry/1.4/WS0BB04E11-1BE3-4a67-BC94-BE7DA93A0159.html