Changing the Font and Width of a Horizontal Spry 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. To open it just click on the words at the top left side of the document to display a split screen, the design view in the right pane and the css style sheet in the left pane.

CSS Style Sheet

There are two style rules that set font-size to 100%: ul.MenuBarHorizontal (the first rule in the style sheet) and ul.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-size in ul.MenuBarHorizontal to 90%.

To change the fonts used in the menu, add the font-family property to the ul.MenuBarHorizontal style rule. Change the font size to 90%, font face to Tahoma, Geneva, sans-serif, and the font-weight to bold.

To change the font options listed above double click on the ul.MenuBarHorizontal in the All CSS Styles panel.

Srpy Menu Options

This brings up the CSS Rule Definition for the ul.MenuBarHorizontal dialog box. The changes are shown below:

Font Options

Click OK to apply the settings to the font.

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, you are going to make them all 160px wide.

Locate the ul.MenuBarHorizontal li style rule (it's the third from the top) to change the width of the top-level items. Double click on it to open the CSS Rule Definition for the ul.MenuBarHorizontal li dialog box. Select the Box category ad change the width to 160 and choose px as the width format.

CSS Rule

Now change the width of the submenu items. Locate the ul.MenuBarHorizontal ul style rule, and change width: 8.2em; to width: 160px;.

Width 160

Make the same change in the ul.MenuBarHorizontal ul li style rule (it's two further down from ul.MenuBarHorizontal ul).

CSS Rule

CSS Layout