Changing the Font and Width of a Horizontal 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.MenuBarHorizontal. 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 two style rules that set
font-sizeto100%:ul.MenuBarHorizontal(the first rule in the style sheet) andul.MenuBarHorizontal li, which appears slightly further down.If you want to use a percentage font size or ems, change only the first rule (
ul.MenuBarHorizontal). Changing the value of the font-size property in the rule further down (ul.MenuBarHorizontal li) 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 two rules (
ul.MenuBarHorizontal li).For the purposes of this tutorial, change
font-sizeinul.MenuBarHorizontalto90%. -
To change the fonts used in the menu, add the
font-familyproperty to theul.MenuBarHorizontalstyle 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.MenuBarHorizontalstyle rule.
That completes the main changes to the fonts. The amended style rule should now look like this:
ul.MenuBarHorizontal {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 90%;
cursor: default;
width: auto;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
}
Adjusting the menu item widths
The width of each menu item is controlled in three places. The first one (ul.MenuBarHorizontal li) controls the top-level menu items. The other two (ul.MenuBarHorizontal ul and ul.MenuBarHorizontal 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.
-
Locate the
ul.MenuBarHorizontal listyle rule (it's the third from the top) to change the width of the top-level items. Changewidth: 8em;towidth: 160px;. Make sure there is no space between the number andpx. -
Now change the width of the submenu items. Locate the
ul.MenuBarHorizontal ulstyle rule, and changewidth: 8.2em;towidth: 160px;. -
Make the same change in the
ul.MenuBarHorizontal ul listyle rule (it's two further down fromul.MenuBarHorizontal ul).
All that remains for the basic customization of the menu bar is to change the colours.
Back
