Changing the Colours of a Vertical Spry Menu Bar

There are three stages to adjusting the colours for a vertical menu bar:

The following instructions use the colours shown in the examples of styled menu bars. Use your own choice of colours if you're incorporating the menu bar into your own design.

Changing the normal background and font colours

  1. Scroll down to the Design Information section in the style sheet. All the changes are made here.

  2. In the ul.MenuBarVertical a style rule, change the value of background-color from #EEE (light grey) to #A3AAC6 (light mauve).

  3. In the same style rule, change the value of color from #333 (dark grey) to #FFF (white).

Changing the colour for menu items when moused over

  1. The next two style rules use the same colours, so it makes sense to combine them. The default rules look like this:

    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { background-color: #33C; color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #33C; color: #FFF; }

  2. Type a comma after a:focus at the end of the first line, and delete from the opening curly brace to the end of the comment. The result should look like this:

    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus, ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #33C; color: #FFF; }

  3. Change the value of background-color from #33C (royal blue) to #7A85AD (dark mauve).

  4. Change the value of color from #FFF (white) to #333 (dark grey).

Adding borders to the menu items

  1. The default style rules put a light grey border on the vertical menu with the following style rule:

    ul.MenuBarVertical { border: 1px solid #CCC; }

  2. This border won't be needed when you add your own. Rather than deleting this rule, it's a good idea to comment it out. This will remind you how to reapply the border to the menu if you decide to change the design at a later stage. Surround the style rule with CSS comment tags like this:

    /* ul.MenuBarVertical { border: 1px solid #CCC; } */

  3. Immediately following is another rule that adds a border to the submenus. Comment it out in the same way.

    /* ul.MenuBarVertical ul { border: 1px solid #CCC; } */

  4. To make the menu items look like buttons, you need to add the different coloured borders to the rule that styles the links, ul.MenuBarVertical a. The border needs to be the same width and style on all sides, so add the following property to the ul.MenuBarVertical a style rule:

    border: 2px solid;

  5. Use the border-top-color, border-right-color, border-bottom-color, and border-left-color properties to add the colours. The top and left values should be a lighter colour than the background-color. The right and bottom values should be darker. After the changes, the complete style rule should look like this:

    ul.MenuBarVertical a { display: block; cursor: pointer; background-color: #A3AAC6; padding: 0.5em 0.75em; color: #FFF; text-decoration: none; border:2px solid; border-top-color:#C4C9DB; border-right-color:#565968; border-bottom-color:#565968; border-left-color:#C4C9DB; }

Changing the spacing inside the menu items

The ul.MenuBarVertical a style rule adds 0.5em of padding at the top and bottom of each menu item, and 0.75em on each side. This creates a space between the text and the edge of the menu item. If you want to reduce the height of the menu items, adjust the padding property by changing 0.5em to something like 2px.

That completes the styling of a vertical menu bar.

Back

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

PHP SolutionsBeginning CSS3Dreamweaver CS6: Learn by VideoDreamweaver CS5.5: Learn by VideoDreamweaver CS5.5 for MobileDreamweaver CS5 with PHP