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-family, font-weight, and 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
font-sizeto100%:ul.MenuBarVertical(the first rule in the style sheet),ul.MenuBarVertical li, andul.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 liorul.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 (
ul.MenuBarVerticall li).For the purposes of this tutorial, change
font-sizeinul.MenuBarVerticalto90%. -
To change the fonts used in the menu, add the
font-familyproperty to theul.MenuBarVerticalstyle rule. I usedTahoma, Geneva, sans-serif. -
The text in the menu bar looks better in a bold font, so add
font-weight: bold;to theul.MenuBarVerticalstyle rule.
That completes the main changes to the fonts. The amended style rule should now look like this:
ul.MenuBarVertical {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 90%;
cursor: default;
width: 8em;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
}
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 160px wide.
-
Change the value of the
widthproperty in theul.MenuBarVerticalstyle rule from8emto160px. This controls the overall width of the vertical menu. Make sure there is no space between the number andpx. -
Locate the
ul.MenuBarVertical listyle rule (it's the third from the top) to change the width of the top-level items. Changewidth: 8em; towidth: 160px;. -
Now change the width of the submenu items. Locate the
ul.MenuBarVertical ulstyle rule, and changewidth: 8.2em;towidth: 160px;. -
Make the same change in the
ul.MenuBarVertical ul listyle rule (it's two further down fromul.MenuBarVertical ul).
All that remains for the basic customization of the menu bar is to change the colours.
Back
