Customizing a Spry Menu Bar
Inserting a Spry Menu Bar in Dreamweaver CS3 and CS4 takes only a few moments, but the default styles are uninspiring—and that's putting it mildly. However, with some careful planning and a reasonable understanding of CSS, you can turn a drab standard menu bar into something much more elegant relatively easily.
First, take a look at the default styles of horizontal and vertical Spry Menu Bars. By the end of this tutorial, you should have created a more elegant design.
Styling both types of menu bar is very similar. The first few pages of this tutorial apply to both types. When it comes to working with the CSS, I'll give separate instructions.
This tutorial covers the following subjects:
- Planning your menu bar
- Inserting the menu bar
- Making your own copy of the style sheet
- Understanding the default style rules
- Customizing a horizontal menu bar
- Customizing a vertical menu bar
Planning your menu bar
There are several things you need to decide before embarking on styling a Spry Menu Bar.
- How many top-level items will it have?
- How wide will the menu be?
- What colours will you use?
Choosing the number of items and the overall width is particularly important for a horizontal menu bar. This is because it is made up of nested unordered lists with each list item floated left. This makes it impossible to centre a horizontal menu bar unless you give it a fixed width. By default, each main menu item is
8em wide. For a fixed width menu, you need to replace this with a width measured in pixels. Of course, if you don't want to centre the menu, you can remove the width settings, and let each menu item automatically adjust to accommodate the text.
Choosing the width and number of items is less critical for a vertical menu bar. If you add more top-level items, the menu bar simply grows taller. However, you must either declare a width for the menu items or put the menu in a container that has a declared width. Otherwise, if you remove the default widths, each menu item will stretch the full width of the page.
For the purposes of this tutorial, I'm going to have six top-level items, each 160
px wide. This will make a horizontal menu bar 960
px wide, and vertical menu bar will be just 160
The colours you choose will depend on the design of your website, but for this tutorial, I'm going to use the following:
- Main background: light mauve (
- Main text: white (
- Background on mouseover: dark mauve (
- Text on mouseover: dark grey (
I plan to make the menu items look like buttons, so I created a solid rectangle using the main background colour in a graphics editor, and applied a bevel effect like this:
I then used the eyedropper tool in the graphics editor to get the colours from the top and right sides of the bevel to give me the colours for the button borders (
Note: The rectangle created in the graphics editor is not used as a background image for the buttons. It's simply used to get the right colours for the borders. After making a note of the colours, you can discard the image.
Right. That's the basic planning done. Now let's style the menu bar.