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.

  1. Open the style sheet you renamed and attached to the page in the previous section.

  2. There are three style rules that set font-size to 100%: 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 li or 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 (ul.MenuBarVerticall li).

    For the purposes of this tutorial, change font-size in ul.MenuBarVertical to 90%.

  3. To change the fonts used in the menu, add the font-family property to the ul.MenuBarVertical style rule. I used Tahoma, Geneva, sans-serif.

  4. The text in the menu bar looks better in a bold font, so add font-weight: bold; to the ul.MenuBarVertical style 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.

  1. Change the value of the width property in the ul.MenuBarVertical style rule from 8em to 160px. This controls the overall width of the vertical menu. Make sure there is no space between the number and px.

  2. Locate the ul.MenuBarVertical li style rule (it's the third from the top) to change the width of the top-level items. Change width: 8em; to width: 160px;.

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

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

All that remains for the basic customization of the menu bar is to change the colours.

Back | Next

Quick links to other pages of this tutorial

Planning your Spry Menu Bar

Inserting a Spry Menu Bar and copying the style sheet

Changing the font and width of a horizontal Spry Menu Bar

Changing the colours of a horizontal Spry Menu Bar

Changing the font and width of a vertical Spry Menu Bar

Changing the colours of a vertical Spry Menu Bar

Books & Videos by David Powers

Beginning CSS3Dreamweaver CS6: Learn by VideoDreamweaver CS5.5: Learn by VideoDreamweaver CS5.5 for MobilePHP SolutionsDreamweaver CS5 with PHP