Building a Horizontal Menu in Dreamweaver CS6 Using Spry Menu

R. Berdan Feb 26, 2013

Dreamweaver offers the ability to create a vertical or horizontal menu with drop down menus that can be
modified on any page and updated. The reason for this is that Dreamweaver stores the CSS and
javascript files in an external folder called SpryAssests which it links to each web page. The best way to
create a horizontal menu is to add it to a template page, customize the menu, save the page and then
clone the page to create the other pages in the web site in other words build the menu first. The Spry
menu behaves differently in various versions of Dreamweaver CS3,4,5 and 6 this tutorial is for CS6.
Build a Horizontal Menu at the top of the page with drop down components.

1. If you already have a template you may use it otherwise create a simple web page and insert a
table with 4 rows, 1 column, set the width to 760 px, border =0. Center the table on the page
(Format>align>center).
2. Place your cursor in the top table cell and add 4 carriage returns, then change the background
color to a solid e.g. navy.
3. Place the cursor in the 3rd row and add 10 carriage returns (Enter 10X).
4. Place the cursor in the bottom row and change the background color to black. Save the page into
a folder and call it template.html.

1|Page

5. Place the cursor into the 2nd row where the navigation elements will be inserted.
6. In the insert menu (if its not visible select Window>insert to display it), in my example the insert
menu has been placed at the top of the page rather than the side. Select either the layout or the
Spry tab and click on the Spry menu bar button.

7. When the spry menu option pop up box appears select the horizontal menu option and click OK

8. After doing this you should see 4 menu buttons labelled Item 1, Item 2, Item 3 and Item 4 appear
in the row. In the properties box below you will see MenuBar1 and 4 boxes with Item1 to Item 4.
These boxes permit you to add more items, and also change the labels from Item to anything you
want. If you accidently click outside the box and this property box appearance disappears, put the
cursor inside Item 1 box, at the bottom of the page in the tag bar click on
<ul#MenuBar1.MenuBarHorizontal> and the properties should once again show the Menu bar
options.

2|Page

9.

Select Item 1 and on the right side of the property box type in the Menu Item name e.g.
Welcome, in the Link# box type in the page this menu item will link to e.g. index.html (A title and
target are not necessary when making links to other pages within a web site). Note the first menu
box has a down arrow, and in the 2nd text box within the property box there is a list of links
Item1.1, Item1.2 etc these are submenus. You can add text and links to these or you can
remove them. You can also add drop down submenus to any of the other menus using the + icon.
To add more top menu elements, click on the + symbol in the first property text box. Add 7 top
menu items.

Welcome About Services Gallery Links News

page.html

Contact Us and make each one link to a unique

Welcome index.html
About about.html
Services services.html
Gallery gallery.html
Links links.html
News news.html
Contact contact.html
After doing this you will see the menu wrap if the table was set to 760 px width. You can either make the
table wider to fit all the menu items, or you can decrease the font size of the labels to try and fit the menu
items. If you change the width to about 904 px wide all the buttons will fit. Alternatively, click on the
outer bounding box of the Welcome menu so it has a blue border.

3|Page

10. In the properties box you will see a different array of text boxes, one beside the Z index, it will say
W 8em this is the width of the text boxes. If you change it to 6.7em and the width to 760 px all
the buttons should fit. By making the em value smaller, the buttons will become narrower.
Chaning the font and font size of the text using CSS will also alter the width of each button.
11. To return to the Properties box to add submenu items, or additional menu items place your cursor
in the first menu item after the text Welcome then click on the tag bar at the bottom selecting
<ul#MenuBar1.MenuBarorizontal> and you should once again see the menu bar options to add
or subtract menu items.
12. Place your cursor in the first menu item after Welcome, click on the html tag bar on
<ul#MenuBar1.MenuBarorizontal> and in the properties box select in the first text box >Welcome.
You should see item1.1, Item 1.2 and Item 1.3 lets change these and add links. Select item 1.1
and in the adjoining Text box type in Prices, prices.html, then Item 1.2 Quote, quote.html, Item
1.3 Hiring hiring.html see picture below.

4|Page

13. If you select Design and Live View you can see what the menu will look like and how it interacts
when you rollover a menu item. The background should turn blue and the rollover text turns
white. After testing, return to Design mode (turn Live mode off).

14. The appearance of the text (font size, color and style) in the drop down menu can be changed by
modifying the CSS that is created for the menu. You can see the CSS in the CSS panel. If the
CSS panel is not visible select >Window>CSS styles. Make sure the All button is selected in the
CSS styles box, and under All Rules that the + is selected so it turns to a and all the styles
are expanded below as show in the picture below.

5|Page

Change the default background color of the menu and text color
15. In the CSS menu click on ul.MenuBarHorizontal a and in the Properties box below select color,
click on the color box and change it to Dark blue (navy) or any color you want. The Top item
background color lets you change the default background color of the menu buttons.

6|Page

16. Change the roll over color of the menu buttons - the default is dark blue with the text turning
white. Select the longest line in the CSS drop down: ul.MenuBarHorizontal
a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible - then below in the Properties box blow
the CSS box modify the background-color and color (text).

17. To change the font style select ul.MenuBarHorizontal a, then click on the pencil icon to edit the
style and choose Type, change the font to Arial, Helvetica, sans-serif or other choice. Click OK.

7|Page

When you are finished customizing the menu, Select Save and you will see the following window
indicating that it is saving these files into a special folder called Spry Assests which must be uploaded
with the other web pages to the server in order for the menu to operate. Click OK

From here you create the other web pages by cloning the template page. When you need to modify the
menu, you open any page in Dreamweaver and put your cursor in the first menu box after Welcome in
this case, select the tag in the bottom box <ul#menuBar1.MenuBarHorizontal> and you should be able to
edit the items in the bottom properties box.
You may have to change the background color in the div or table cell that the menu appears in to prevent
gaps on either side of the navigation menu. There are other programs and plugins for Dreamweaver that
are better at creating drop down menus, or alternatively you can code one from scratch using one of my
other tutorials.
You can view Dreamwever> Help search for Spry Horizontal Menu and there is additional information
about each CSS element and how you can customize and modify the drop down menus.

Customize the Menu Bar widget

Although the Property inspector enables you to make simple edits to a Menu Bar widget, it
does not support customized styling tasks. You can alter the CSS rules for the Menu Bar
widget and create a menu bar that is styled to your liking.
All CSS rules in the topics below refer to the default rules located in the
SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file (depending on your selection).
Dreamweaver saves these CSS files in the SpryAssets folder of your site whenever you
create a Spry Menu Bar widget. These files also contain useful commented information
about various styles that apply to the widget.

8|Page

Although you can easily edit rules for the Menu Bar widget directly in the accompanying
CSS file, you can also use the CSS Styles panel to edit the menu bars CSS. The CSS Styles
panel is helpful for locating the CSS classes assigned to different parts of the widget,
especially if you use the panels Current mode.

Change text styling of a menu item

The CSS attached to the <a> tag contains the information for text styling. There are also
several relevant text styling class values attached to the <a> tag that pertain to different menu
states.

To change the text styling of a menu item, use the following table to locate the
appropriate CSS rule, and then change the default value:
Style to
change

Default
text

Text
color
when
mouse
pointer
moves
over it
Text
color
when in
focus
Menu
Bar item
color
when
mouse
pointer
moves
over it
Submen

CSS rule for

vertical or
horizontal menu
bar

ul.MenuBarVertical a,
ul.MenuBarHorizontal a

Relevant
properties
and
default
values
color:
#333; textdecoration
: none;

ul.MenuBarVertical
a:hover,
ul.MenuBarHorizontal
a:hover

color:
#FFF;

ul.MenuBarVertical
a:focus,
ul.MenuBarHorizontal
a:focus

color:
#FFF;

ul.MenuBarVertical
a.MenuBarItemHover,
ul.MenuBarHorizontal
a.MenuBarItemHover

color:
#FFF;

ul.MenuBarVertical

color:

9|Page

Style to
change

CSS rule for

vertical or
horizontal menu
bar

Relevant
properties
and
default
values

u item
color
when
mouse
pointer
moves
over it

a.MenuBarItemSubmenuHover
, ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover

#FFF;

Change the background color of a menu item

The CSS attached to the <a> tag contains the information for a menu items background
color. There are also several relevant background color class values attached to the <a> tag
that pertain to different menu states.

To change the background color of a menu item, use the following table to locate the
appropriate CSS rule, and then change the default value:
Color to
change

Default
backgroun
d
Backgrou
nd color
when
mouse
pointer
moves
over it
Backgrou
nd color
when in
focus
Menu Bar
item color

CSS rule for

vertical or
horizontal menu
bar

ul.MenuBarVertical a,
ul.MenuBarHorizontal a

Relevant
properties
and
default
values
backgroun
d-color:
#EEE;

ul.MenuBarVertical
a:hover,
ul.MenuBarHorizontal
a:hover

backgroun
d-color:
#33C;

ul.MenuBarVertical
a:focus,
ul.MenuBarHorizontal
a:focus

backgroun
d-color:
#33C;

ul.MenuBarVertical
a.MenuBarItemHover,
ul.MenuBarHorizontal

backgroun
d-color:

10 | P a g e

Color to
change

CSS rule for

vertical or
horizontal menu
bar

Relevant
properties
and
default
values

when
mouse
pointer
moves
over it

a.MenuBarItemHover

#33C;

ul.MenuBarVertical
a.MenuBarItemSubmenuHove
r, ul.MenuBarHorizontal
a.MenuBarItemSubmenuHove
r

backgroun
d-color:
#33C;

Submenu
item color
when
mouse
pointer
moves
over it

Change the dimension of menu items

You change the dimension of menu items by changing the width properties of the menu
items liand ul tags.
1. Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal
li rule.
2. Change the width property to a desired width (or change the property to auto to
remove a fixed width, and add the property and value white-space:
nowrap; to the rule).
3. Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal
ul rule.
4. Change the width property to a desired width (or change the property to auto to
remove a fixed width).
5. Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul
li rule:
6. Add the following properties to the rule: float: none; and backgroundcolor: transparent;.
7. Delete the width: 8.2em; property and value.

Position submenus
The position of Spry Menu Bar submenus is controlled by the margin property on
submenu ultags.
1. Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal
ul rule.
2. Change the margin: -5% 0 0 95%; default values to the desired values.

11 | P a g e

View Adobes Spry Menu tutorial video

http://www.adobe.com/designcenter-archive/video_workshop/?id=vid0168 the video is for CS3 which is
slightly different then in CS6.

If using HTML 5 you will need to add the following CSS code so that there is no white space or gap below
the image banner. Add the code into the <img src=banner.jpg > also make sure the cellspacing and
cellpadding values are set to 0.
<img style=display: block>
Or <img style=vertical-align: bottom>

12 | P a g e