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

There are several things you need to decide before embarking on styling a Spry Menu Bar.

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 160px wide. This will make a horizontal menu bar 960px wide, and vertical menu bar will be just 160px wide.

The colours you choose will depend on the design of your website, but for this tutorial, I'm going to use the following:

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:

mauve rectangle with bevel effect

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 (#C4C9DB and #565968).

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.


Other Tutorials

Programming tutorials

Articles on

Over the years, I have contributed a large number of articles to the Adobe Developer Connection and Community publishing. Most of the articles are now in the Adobe archive because they refer to old versions of Dreamweaver. But the following articles are not Dreamweaver-specific and are still relevant.

Books & Videos by David Powers

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