Changing the Font and Width of a Vertical Spry Menu Bar
The following instructions split the customization process for a horizontal menu bar into easy steps. There are separate instructions for a vertical menu bar.
Changing the menu bar fonts
If your main style sheet defines the fonts to be used on the page, they will be automatically inherited by the menu bar. However, you might want to use different fonts for the menu. All changes affecting
font-size should be made in the first style rule,
ul.MenuBarVertical. This rule affects everything in the menu bar.
Open the style sheet you renamed and attached to the page in the previous section.
There are three style rules that set
ul.MenuBarVertical(the first rule in the style sheet),
ul.MenuBarVertical li, and
ul.MenuBarVertical ul, which appear slightly further down.
If you want to use a percentage font size or ems, change only the first rule (
ul.MenuBarVertical). Changing the value of the font-size property in either of the other rules further down (
ul.MenuBarVertical ul) will shrink the text in the submenus, making it progressively smaller with each new level.
If you want to use pixels for the font size, make the change in the second of these rules (
For the purposes of this tutorial, change
To change the fonts used in the menu, add the
font-familyproperty to the
ul.MenuBarVerticalstyle rule. I used
Tahoma, Geneva, sans-serif.
The text in the menu bar looks better in a bold font, so add
font-weight: bold;to the
That completes the main changes to the fonts. The amended style rule should now look like this:
font-family:Tahoma, Geneva, sans-serif;
Adjusting the menu item widths
The width of each menu item is controlled in four places. The first one (
ul.MenuBarVertical) controls the overall width of the menu; the second (
ul.MenuBarVertical li) controls the width of the top-level menu items; and the remaining two (
ul.MenuBarVertical ul and
ul.MenuBarVertical ul li) control the width of the items in the submenus. By default, the top-level items are
8em, and the submenus
8.2em. For the purposes of this tutorial, I'm going to make them all
Change the value of the
widthproperty in the
ul.MenuBarVerticalstyle rule from
160px. This controls the overall width of the vertical menu. Make sure there is no space between the number and
ul.MenuBarVertical listyle rule (it's the third from the top) to change the width of the top-level items. Change
width: 8em; to
Now change the width of the submenu items. Locate the
ul.MenuBarVertical ulstyle rule, and change
Make the same change in the
ul.MenuBarVertical ul listyle rule (it's two further down from
All that remains for the basic customization of the menu bar is to change the colours.