building horizontal menu dreamweaver cs6 spry menu
TRANSCRIPT
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
1/12
1 | P a g e
Building a Horizontal Menu in Dreamweaver CS6 Using Spry MenuR. 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.
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
2/12
2 | P a g e
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 youwant. 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
and the properties should once again show the Menu bar
options.
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
3/12
3 | P a g e
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 Contact Us and make each one link to a unique
page.html
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.
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
4/12
4 | P a g e
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
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
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.
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
5/12
5 | P a g e
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.
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
6/12
6 | P a g e
Change the default background co lor of the menu and text color
15. In the CSS menu click on ul.MenuBarHorizontal aand 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.
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
7/12
7 | P a g e
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 co lor (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.
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
8/12
8 | P a g e
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 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 preventgaps 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 Barwidget 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/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
9/12
9 | P a g e
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 tag contains the information for text styling. There are also
several relevant text styling class values attached to the 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
CSS rule for
vertical or
horizontal menu
bar
Relevant
properties
and
defaultvalues
Defaulttext
ul . MenuBar Ver t i cal a,ul . MenuBar Hori zont al a color:
#333; text-decoration: none;
Textcolorwhen
mousepointermovesover it
ul . MenuBar Ver t i cala: hover ,ul . MenuBar Hori zont ala: hover
color:#FFF;
Textcolorwhen infocus
ul . MenuBar Ver t i cala: f ocus,ul . MenuBar Hori zont ala: f ocus
color:#FFF;
MenuBar item
colorwhenmouse
pointermovesover it
ul . MenuBar Ver t i cala. MenuBar I t emHover ,
ul . MenuBar Hori zont ala. MenuBar I t emHover
color:#FFF;
Submenul . MenuBar Ver t i cal
color:
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
10/12
10 | P a g e
Style to
change
CSS rule for
vertical or
horizontal menu
bar
Relevant
properties
and
default
values
u itemcolorwhenmouse
pointermovesover it
a. MenuBar I t emSubmenuHover, ul . MenuBar Hor i zont ala. MenuBar I t emSubmenuHover
#FFF;
Change the background color of a menu item
The CSS attached to the tag contains the information for a menu items background
color. There are also several relevant background color class values attached to the tagthat 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
CSS rule for
vertical or
horizontal menu
bar
Relevant
properties
and
default
values
Defaultbackground
ul . MenuBar Ver t i cal a,
ul . MenuBarHor i zont al a background-color:#EEE;
Background colorwhenmouse
pointermovesover it
ul . MenuBar Ver t i cala: hover ,ul . MenuBarHor i zont ala: hover
background-color:#33C;
Background colorwhen infocus
ul . MenuBar Ver t i cala: f ocus,ul . MenuBarHor i zont ala: f ocus
background-color:#33C;
Menu Baritem color
ul . MenuBar Ver t i cala. MenuBar I t emHover ,ul . MenuBarHor i zont al
background-color:
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
11/12
11 | P a g e
Color to
change
CSS rule for
vertical or
horizontal menu
bar
Relevant
properties
and
default
values
whenmouse
pointermovesover it
a. MenuBar I t emHover #33C;
Submenuitem colorwhenmouse
pointer
movesover it
ul . MenuBar Ver t i cala. MenuBar I t emSubmenuHover , ul . MenuBar Hor i zont ala. MenuBar I t emSubmenuHover
background-color:#33C;
Change the dimension of menu items
You change the dimension of menu items by changing the width properties of the menu
items l i and ul tags.
1. Locate the ul . MenuBar Ver t i cal l i or ul . MenuBarHor i zont al
l i rule.
2. Change the width property to a desired width (or change the property to aut oto
remove a fixed width, and add the property and value whi t e- space:
nowr ap; to the rule).3. Locate the ul . MenuBarVer t i cal ul or ul . MenuBarHor i zont al
ul rule.
4. Change the width property to a desired width (or change the property to aut oto
remove a fixed width).
5. Locate the ul . MenuBar Ver t i cal ul l i or ul . MenuBar Hor i zont al ul
l i rule:
6. Add the following properties to the rule: f l oat : none; and backgr ound-
col or : t r anspar ent ; .
7. Delete the wi dth: 8. 2em; property and value.
Position submenusThe position of Spry Menu Bar submenus is controlled by the margin property on
submenu ul tags.
1. Locate the ul . MenuBarVer t i cal ul or ul . MenuBarHor i zont al
ul rule.
2. Change the margi n: - 5% 0 0 95%; default values to the desired values.
-
8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu
12/12
12 | 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 also make sure the cellspacing and
cellpadding values are set to 0.
Or
http://www.adobe.com/designcenter-archive/video_workshop/?id=vid0168http://www.adobe.com/designcenter-archive/video_workshop/?id=vid0168http://www.adobe.com/designcenter-archive/video_workshop/?id=vid0168