Horizontal Spry menu bar

Spry is Dreamweaver's term for dynamic features that are enabled by a combination of CSS and JavaScript. An example of this is the expandable menu with submenus at the top of the page. When inserting a Spry feature, Dreamweaver establishes a SpryAssets folder in the root folder containing the files required to make it function. This page covers the basics for inserting and styling a horizontal Spry menu.

Inserting a horizontal Spry menu bar.

In the web page, click where the menu is to be inserted. From the Insert panel choose the Spry category and click on the Spry Menu Bar button.

Spry button

In the Spry Menu dialogue, choose horizontal for menu layout and click OK.

Spry horizontal

The menu is inserted into the page.

Spry menu

Preview the web page in the browser. When doing so, a panel will appear asking to Copy Dependent Files. Click OK.

Copy Dependent Files

This will establish a SpryAssets folder in the root folder containing a JavaScript and CSS file. The links to these files will also be added in the <head> of the web page. This folder also contains four gif images. These images are the pointers that indicate sub menus. JavaScript is also entered in the html document before the closing <body> tag to enable the pointers to function.

In the browser, mouse over the menu and the sub menus will be revealed. The menu will also function in Live View.

Changing menu items and adding links.

Changing menu items and adding links can be done form the Properties panel. In Design View, select the menu by clicking on the tab that appears above the menu to reveal the options in the Properties panel.

Properties panel

The three boxes in the centre display the default menu items. Click on the items in the first box and the sub items, if any, for that menu are displayed in the next box and so-on.

To change the label for a menu item, select it in the Properties panel and enter the desired text in the Text field.

To add a link to an item, enter it in the Link field or click on the Browse For File icon. For a menu item that contins sub-items do not add a URL. In these cases maintain the hash sign in the link field. To make a link open in a new browser window, type _blank in the Target field. Enter text in the Title field if you require a label to appear when the cursor is over a menu item.

Set up the workspace for changing the CSS of the menu bar

The CSS document for the menu bar is commented to help identify what each style does. When changing styles for the menu bar it helps to work with both the CSS document and the CSS Styles panel open as well as the web page.

Choose Split View for the web page and at the top of the document window, click on the reference to the CSS in the area that lists Related files.

Realated files

Then go to View > Split Vertically so that the CSS and the Design View of the web page are side-by-side.

Split view

To edit styles for the menu, locate the style and click on it with the cursor. This will highlight the style in the CCS Styles panel from where it can be edited. Alternatively, type new values and properties directly in the style sheet. Work in Live View to see the changes in action without the need to preview in a browser.

The CSS for the menu is divided into four sections:

The sections that affect presentation are Layout and Design with most of the presentation being controlled by the styles in the Design section. The Submenu and Browser sections do not need to be changed, especially the Browser section.

Width and text size - Layout information

Width for the menu and overall size for text can be set in the Layout section.

The width of the menu and submenus can be edited from these styles:

Define the width for top level items in the first style. The last two are for widths of submenu items. The width for the submenu items need to be the same.

Text size is controlled by these styles:

The first style controls overall size the text for the menu. Add a type category to this style if a different font is required from the default of the page. The second two control the size for submenus.

The measurements used in the style sheet are percentage for text and ems for menu width. It is possible to use these forms of measurement or convert them to pixels. Changing size for the text affects the size of the menu. To maintain the widths, convert the menu widths to pixels.

Changing colour and borders - Design information

Change the colour of text, background colours and borders from the styles in the Design section.

This style defines the border around blocks of submenu items. To remove the border give it a value of zero. You may want to do this if you consider giving each menu item a border instead.

The next style is:

The initial background colour of the menu and colour of text can be set from here. You can also add a border property to this style if you require each menu item to have borders. The padding affects the distance of the text from the edge of the menu. This can be changed to pixels if desired.

Next in the CSS are two sets of grouped styles:

Set the backround colour and text colour for the mouse over (focus) aspect of the menu items. Use the same set of properties in each group.

Submenu Indication

These are the styles that control the placement of the pointers. To use your own images save them into the SpryAssets folder, overwriting the existing gif files and using the same filenames as already used.

Browser Hacks

Ensures compatibility with Internet Explorer. Do not append these unless you have appropriate technical information.