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.
-
Create the page where you want to insert the menu bar and save it.
-
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.
-
Dreamweaver presents you with the following dialog box. Select the type of menu bar that you want to insert, and click OK.
-
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
SpryAssetsfolder 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.
-
In the Files panel, locate
SpryMenuBarHorizontal.css(orSpryMenuBarVertical.cssfor a vertical menu bar) in theSpryAssetsfolder, and double-click the file name to open the style sheet in the Document window. -
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.
-
Close the original
SpryMenuBarHorizontal.css(orSpryMenuBarVertical.css) to avoid making any changes to it accidentally. -
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(orSpryMenuBarVertical.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:
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.
-
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.
-
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.
-
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:
Layout information: This controls things like widths, margins, and font size. You should leave most of these rules as they are. The main exception is the
widthproperty. Three separate rules control width in a horizontal menu bar. In a vertical menu bar, you need to change the width in four locations.Be careful when changing the font size. Changing the value in the wrong place can result in text shrinking in the submenus. This is explained in detail in the instructions that follow.
Design information: This controls colours, borders, and padding inside the menu items. This is where you can let your creative juices flow.
Submenu indication: These rules control the arrows that indicate whether an element has a submenu. Leave these rules alone unless you want to use your own background images for the menu items.
Browser hacks: You should leave these alone unless you really know what you're doing. They're there to fix problems with older versions of Internet Explorer.
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 lito 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
