HANDOUT:

CUSTOMISING THE DREAMWEAVER SPRY HORIZONTAL MENU BAR

Inserting a DreamweaverSpryMenuBar into a web page - including changing the labels on the ‘buttons’, adding and deleting ‘buttons’, setting up the links and creating sub-menus – is easy. Changing the appearance of the menu bar is not so easy – and you really have to know what you are doing.

You need a good understanding of CSS and should beware of randomly making changes to the associated style sheet.

In addition, do not try making formatting changes to the menu bar by merely selecting the menu bar and attempting to change the appearance of selected areas. This is definitely NOT the way to do it.

To insert a SpryMenuBar, place your insertion point where you want the menu bar to appear. You may find it convenient to first insert a centred, border-less 1-row, 1-column table on the page to help position the menu bar.

Select Insert on the menu bar / Spry / Spry Menu Bar:

Select Horizontal or Vertical.

The default Spry Menu Bar is an uninteresting grey and consists on four ‘buttons’ with default sub-menus:

The ‘buttons’ can be renamed, submenus added or deleted, links created and further buttons added by using the PropertiesInspector:

To display the MenuBar’sPropertyInspector you need to select the blue bar at the top left of the MenuBar (see above).

For the ExoticBreak’s website you need to create a Spry Menu Bar as shown below:

Use the PropertyInspector to renameItem 1 (Home), Item 2 (Destinations), Item 3 (Search) and Item 4 (Feedback).

Set up the links as follows:

Text / Link
Home / index.html
Destinations / #
Search / search.asp
Feedback / feedback.html

Delete Items 1.1, 1.2 and 1.3 and Items 3.1, 3.2 and 3.3 to remove the sub-menus from the Home and Search ‘buttons’.

Add Items2.1, 2.2 and 2.3 and rename as follows:

Item / Text / Link
Item 2.1 (Untitled Item) / Far East / far_east.html
Item 2.2 (Untitled Item) / Africa / africa.html
Item 2.3 (Untitled Item) / South America / south_america.html

This will create a sub-menu from the Destinations ‘button’.

When you now save this page the following dialog box appears:

Select OK.

A folder SpryAssets is created within your Dreamweaver site. This folder contains the required external CSS files, external JavaScript files and images to implement either the horizontal or vertical navigation bars.

Test your menu bar by viewing locally in a browser:

Note that the PropertyInspector contains a button TurnStylesOff. This allows the designer to toggle styles ON and OFF – to display the underlying unordered nested lists:

You now might like to change the appearance of your MenuBar.

The following brief notes will allow you to format the MenuBar as shown in the ExoticBreaks website.

Note that the PropertyInspector contains a link Customizethiswidget. This leads to the Help fileCustomizetheMenuBarwidget.

The SpryMenuHorizontalBar.css external stylesheet contains a long list of predefined styles:

Type style and size:

If you would like to use a specific font, size, weight, style, variant or case attribute for ALL the text in your menu bar, specify it in the ul.MenuBarHorizontal style. Otherwise the above styles are inherited from any page elements which enclose the MenuBar – for example, the font-family and font-size that you may have set for the <body>.

The colour of the text will be defined elsewhere.

In the ExoticBreaks website no changes were made here.

Menu bar width:

By default, the width of each menu item is set to 8ems and the overall menu bar width is set to auto - determined automatically by the width and number of menu items.

ExoticBreaks requires an overall menu bar width of approximately 480px – with each of the four ‘buttons’ being approximately 120px in width and 20px in height.

For the ExoticBreaks website the following changes were made:

Style / Old Value / New Value
ul.MenuBarHorizontal / auto / 490px (to allow for space taken up by borders)
ul.MenuBarHorizontal li / 8em / 120px

Note that changes made to ul.MenuBarHorizontal li affect only the items in your top level menu. The width of sub-menus is not affected.

Menu bar height:

You should be able to control the height of your menu bar by specifying a height attribute in the ul.MenuBarHorizontal a style. This can cause type to be cropped or even disappear if text is resized or a menu item unexpectedly wraps to a second line. Note: I cannot get this to work in the ExoticBreaks website – or any other website!

Addendum: Change padding-top to 0.2em and padding-bottom to 0em. It works!!!

Colour of menu items:

The colour of menu items in the linkstate (when they are not being hovered over or clicked) is determined by the ul.MenuBarHorizontal a style. To change the look of your menu items, simply change the default background-colorand color styles. This is also the place to add borders if you want to visually separate the menu items.

For the Exotic Breaks website the following ul.MenuBarHorizontal a style attributes were set:

Attribute / Value
background-color / #FF9900
color / #996633
height / 20px
border / thin solid #996633
padding-top / 0.2em
padding-bottom / 0em

Incidentally, I accidentally set the border properties on ul.MenuBarHorizontal li and this seemed to work better. You might like to try this instead if you have problems with the appearance, for example, of the sub-menu.

Rollover colour of menu items:

To keep it simple, set the background-color and color styles to your preferred rollover colors in the following two style definitions:

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

and

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

In the Exotic Breaks website the following attributes were set for both of these styles:

Attribute / Value
background-color / #FFFF66
color / #996633

H - Customising the Dreamweaver Spry Horizontal Menu Bar.docVersion 1

Page 1 of 9