Sei sulla pagina 1di 12

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 3 rd 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.

the bottom row and change the background color to black. Save the page into a folder

5.

Place the cursor into the 2 nd 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.

or the Spry tab – and click on the Spry menu bar button. 7. When the
or the Spry tab – and click on the Spry menu bar button. 7. When the

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

box appears select the horizontal menu option and click OK 8. After doing this you should

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.

9. Select Item 1 and on the right side of the property box type in

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 2 nd 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.

10. the properties box you will see a different array of text boxes, one beside

10. the properties box you will see a different array of text boxes, one beside the Z index, it will say

In

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.

in Prices, prices.html, then Item 1.2 Quote, quote.html, Item 1.3 Hiring – hiring.html – see picture

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).

After testing, return to Design mode (turn Live mode off). 14. The appearance of the text

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.

Change the default background color of the menu and text color 15. In the CSS

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.

you want. The Top item – background color lets you change the default background color of

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).

the CSS box modify the background-color and color (text). 17. To change the font style select

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.

to edit the style and choose Type, change the font to Arial, Helvetica, sans-serif or other

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

to the server in order for the menu to operate. Click OK From here you create

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.

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 bar’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s 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

CSS rule for vertical or horizontal menu bar

Relevant

change

properties

and

default

 

values

Default

ul.MenuBarVertical a, ul.MenuBarHorizontal a

color:

text

#333; text-

 

decoration

: none;

 

ul.MenuBarVertical

 

Text

a:hover,

ul.MenuBarHorizontal

color:

color

#FFF;

when

a:hover

mouse

pointer

moves

over it

 

ul.MenuBarVertical

 

Text

a:focus,

ul.MenuBarHorizontal

color:

color

#FFF;

when in

a:focus

focus

 

ul.MenuBarVertical

 

Menu

a.MenuBarItemHover,

ul.MenuBarHorizontal

color:

Bar item

#FFF;

color

a.MenuBarItemHover

when

mouse

pointer

moves

over it

Submen

ul.MenuBarVertical

color:

Style to

CSS rule for vertical or horizontal menu bar

Relevant

change

properties

and

default

 

values

u item

a.MenuBarItemSubmenuHover

#FFF;

color

, ul.MenuBarHorizontal

when

a.MenuBarItemSubmenuHover

mouse

pointer

moves

over it

Change the background color of a menu item

The CSS attached to the <a> tag contains the information for a menu item’s 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

CSS rule for vertical or horizontal menu bar

Relevant

change

properties

and

default

 

values

Default

ul.MenuBarVertical a, ul.MenuBarHorizontal a

backgroun

backgroun

d-color:

d

#EEE;

 

ul.MenuBarVertical

 

Backgrou

a:hover,

ul.MenuBarHorizontal

backgroun

nd color

d-color:

when

a:hover

#33C;

mouse

pointer

moves

over it

 

ul.MenuBarVertical

 

Backgrou

a:focus,

ul.MenuBarHorizontal

backgroun

nd color

d-color:

when in

a:focus

#33C;

focus

 

ul.MenuBarVertical

 

Menu Bar

a.MenuBarItemHover,

ul.MenuBarHorizontal

backgroun

item color

d-color:

Color to

CSS rule for vertical or horizontal menu bar

Relevant

change

properties

and

default

 

values

when

a.MenuBarItemHover

#33C;

mouse

pointer

moves

over it

 

ul.MenuBarVertical

 

Submenu

a.MenuBarItemSubmenuHove r, ul.MenuBarHorizontal a.MenuBarItemSubmenuHove

backgroun

item color

d-color:

when

#33C;

mouse

r

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 item’s 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 background- color: 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.

View Adobe’s 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”>