Inserting a Spry Menu Bar

When you insert a Spry Menu Bar, Dreamweaver needs to copy an external JavaScript file, a style sheet, and four images to a special folder in your site root. So before starting, it's important to make sure you have defined a website in Dreamweaver. You also need to save your page within the website so that Dreamweaver can create the correct links to these external assets.

  1. Create the page where you want to insert the menu bar and save it.

  2. Position your cursor at the point in the page where you want the menu to be, and click the Spry Menu Bar button in the Spry category of the Insert panel/bar (or select Insert > Spry > Spry Menu Bar.

  3. Dreamweaver presents you with the following dialog box. Select the type of menu bar that you want to insert, and click OK.

    Spry dialog box

  4. Save the page. If this is the first time you have inserted a Spry Menu Bar in the current site, Dreamweaver presents you with an alert message telling you that it is copying the JavaScript file, style sheet, and images to the SpryAssets folder in your site root. Click OK.

If the SpryAssets folder doesn't already exist, Dreamweaver automatically creates it for you. These assets are shared by all Spry Menu Bars in the same site. So, any changes you make to the style sheet will affect all menu bars attached to it. Separate style sheets are created for horizontal and vertical menu bars. The rules don't conflict with each other, so you can have both types on the same page and style them differently.

Making your own copy of the style sheet

Unless you're supremely confident that you're not going to make any mistakes, it's a good idea to make a copy of the style sheet and work on the copy. That way, you can always ditch your botched valiant attempt, and start again with a fresh copy of the original.

  1. In the Files panel, locate SpryMenuBarHorizontal.css (or SpryMenuBarVertical.css for a vertical menu bar) in the SpryAssets folder, and double-click the file name to open the style sheet in the Document window.

  2. Select File > Save As (Ctrl+Shift+S/Shift+Cmd+S) and save the style sheet with a different name in your own styles folder. Click Yes when Dreamweaver asks if you want to update the links.

  3. Close the original SpryMenuBarHorizontal.css (or SpryMenuBarVertical.css) to avoid making any changes to it accidentally.

  4. Select the page that contains the menu bar, and open the CSS Styles panel. Click the All button at the top left of the panel, and select SpryMenuBarHorizontal.css (or SpryMenuBarVertical.css) in the All Rules section. Click the trash can icon at the bottom right of the panel to remove the existing style sheet, as shown in the following screenshot:

    Removing the style sheet

    As soon as you remove the style sheet, the menu bar is converted into a series of unordered lists. Don't worry. This will be put right as soon as you attach the renamed style sheet from your own styles folder.

  5. Click the icon that looks like a chain link at the bottom of the CSS Styles panel. This opens the Attach External Style Sheet dialog box.

  6. In the dialog box, click the Browse button and navigate to the renamed style sheet that you created in step 6. When you have selected the style sheet, click OK (or Choose) to return to the Attach External Style Sheet dialog box. Then click OK to close the dialog box.

    Attaching the style sheet

  7. Save your page. Before customizing your Spry Menu Bar, take a moment to look at the default styles created by Dreamweaver.

Understanding the default style rules

The default style sheet created by Dreamweaver contains extensive comments explaining what each style rule is for. It's divided into four sections:

The style rules use a class (MenuBarHorizontal or MenuBarVertical) to distinguish menu bars of different orientations. The most important styles are as follows (all the examples are from the horizontal style sheet—the vertical style sheet uses the same basic styles with the MenuBarVertical class):

ul.MenuBarHorizontal
Anything defined here affects the whole menu.
ul.MenuBarHorizontal li
This sets the basic rules for all menu items, removing the margins, padding, and symbols (list-style-type) from the unordered lists. It also sets the width of each menu item. In effect, this controls the width of top-level items, because another rule (ul.MenuBarHorizontal ul li) overrides its value in the submenus.
ul.MenuBarHorizontal ul
This rule appears twice in the style sheet. The first instance—in the Layout information section—sets basic rules for the submenus, including removing them from view until they're displayed and setting the overall width of the submenus. The second instance—in the Design information section—adds a border around the submenus.
ul.MenuBarHorizontal ul li
This overrides the value in ul.MenuBarHorizontal li to set the width for each submenu item.
ul.MenuBarHorizontal ul ul
This sets the position for the second level of submenus.
ul.MenuBarHorizontal a
This is where all the colours are defined.

There are several different ways you can edit the style rules in Dreamweaver, but I think the quickest and easiest way is to open the style sheet in Code view and edit it directly. This is a particularly efficient way of working in Dreamweaver CS4, because the Related Files feature and Vertical Split view let you edit the style rules directly on the left of your screen, while keeping the page in Design view on the right. After making each change, just press F5 to update Design view to see the effect. You don't even need to save the style sheet before previewing the changes.

The next page shows how to customize the styles for a horizontal menu bar. There are separate instructions for customizing a vertical menu bar.

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