Adobe
Sign in Privacy My Adobe

Working with the Spry Menu Bar widget

Adobe Community Help


Contact support

About the Menu Bar widget

A Menu Bar widget is a set of navigational menu buttons that display submenus when a site visitor hovers over one of the buttons. Menu Bars let you display a large amount of navigational information in a compact space, and also give visitors to the site a sense of what is available on the site without having to browse it extensively.

Dreamweaver lets you insert two kinds of Menu Bar widgets: vertical and horizontal. The following example shows a horizontal Menu Bar widget, with the third menu item expanded:



Menu Bar widget (consists of <ul>, <li>, and <a> tags)
A. Menu item has submenu B. Submenu item has submenu 

The HTML for the Menu Bar widget comprises an outer ul tag that contains an li tag for each of the top-level menu items. The top-level menu items (li tags) in turn contain ul and li tags that define submenus for each of the items, and submenus can likewise contain submenus. Top-level menus and submenus can contain as many submenu items as you like.

For a more comprehensive explanation of how the Menu Bar widget works, including a full anatomy of the Menu Bar widget’s code, see www.adobe.com/go/learn_dw_sprymenubar.

For a tutorial on creating a Spry Menu Bar, see www.adobe.com/go/vid0168.

Insert and edit the Menu Bar widget

Insert the Menu Bar widget

  1. Select Insert > Spry > Spry Menu Bar.
  2. Select Horizontal or Vertical, and click OK.

Note:

You can also insert a Menu Bar widget using the Spry category of the Insert panel.

Note:

The Spry Menu Bar widget uses DHTML layers to display sections of HTML on top of other sections. If your page contains content created with Adobe Flash, this might cause a problem because SWF files are always displayed on top of all other DHTML layers, so the SWF file might be displayed on top of your submenus. The workaround for this situation is to change the parameters for the SWF file to use wmode="transparent". You can easily do this by selecting the SWF file in the Document window, and setting the wmode option in the Property inspector to transparent. For more information, see www.adobe.com/go/15523.

Add or delete menus and submenus

Use the Property inspector (Window > Properties) to add or delete menu items to and from the Menu Bar widget.

Add a main menu item

  1. Select a Menu Bar widget in the Document window.
  2. In the Property inspector, click the plus button above the first column.
  3. (Optional) Rename the new menu item by changing the default text in either the Document window or the Text box of the Property inspector.

Add a submenu item

  1. Select a Menu Bar widget in the Document window.
  2. In the Property inspector, select the name of the main menu item to which you want to add the submenu.
  3. Click the plus button above the second column.
  4. (Optional) Rename the new submenu item by changing the default text in either the Document window or the Text box of the Property inspector.

To add a submenu to a submenu, select the name of the submenu item to which you want to add another submenu item, and click the plus button above the third column in the Property inspector.

Note:

Dreamweaver only supports two levels of submenus in Design view, but you can add as many submenus as you want in Code view.

Delete a main menu or submenu item

  1. Select a Menu Bar widget in the Document window.
  2. In the Property inspector, select the name of the main menu or submenu item you want to delete and click the minus button.

Change the order of menu items

  1. Select a Menu Bar widget in the Document window.
  2. In the Property inspector (Window > Properties), select the name of the menu item you want to reorder.
  3. Click the up or down arrows to move the menu item up or down.

Change the text of a menu item

  1. Select a Menu Bar widget in the Document window.
  2. In the Property inspector (Window > Properties) select the name of the menu item whose text you want to change.
  3. Make your changes in the Text box.
  1. Select a Menu Bar widget in the Document window.
  2. In the Property inspector (Window > Properties) select the name of the menu item to which you want to apply a link.
  3. Type the link in the Link text box, or click the folder icon to browse to a file.

Create a tool tip for a menu item

  1. Select a Menu Bar widget in the Document window.
  2. In the Property inspector (Window > Properties) select the name of the menu item for which you want to create a tool tip.
  3. Type the text for the tool tip in the Title text box.

Assign a target attribute for a menu item

The target attribute specifies where to open a linked page. For example, you can assign a target attribute to a menu item so that the linked page opens in a new browser window when the site visitor clicks the link. If you are using framesets, you can also specify the name of a frame where you want the linked page to open.

  1. Select a Menu Bar widget in the Document window.
  2. In the Property inspector (Window > Properties), select the name of the menu item to which you want to assign a target attribute.
  3. Enter one of the four attributes in the Target box:

    _blank

    Opens the linked page in a new browser window.

    _self

    Loads the linked page in the same browser window. This is the default option. If the page is in a frame or frameset, the page loads within that frame.

    _parent

    Loads the linked document in the immediate frameset parent of the document.

    _top

    Loads the linked page in the topmost window of a frameset.

Turn off styles

You can disable the styling of a Menu Bar widget so that you can better see the HTML structure of the widget in Design view. For example, when you disable styles, menu bar items are displayed in a bulleted list on the page, rather than as the styled items of the menu bar.

  1. Select a Menu Bar widget in the Document window.
  2. Click the Turn Styles Off button in the Property Inspector (Window > Properties).

Change the orientation of a Menu Bar widget

You can change the orientation of a Menu Bar widget from horizontal to vertical, and vice versa. All you need to do is alter the HTML code for the menu bar and make sure you have the correct CSS file in your SpryAssets folder.

The following example changes a horizontal Menu Bar widget to a vertical Menu Bar widget.

  1. In Dreamweaver, open the page that contains a horizontal Menu Bar widget.
  2. Insert a vertical Menu Bar widget (Insert > Spry > Spry Menu Bar) and save the page. This step ensures that the correct CSS file for a vertical menu bar is included in your site.

    Note:

    If your site already has a vertical Menu Bar widget somewhere else, you don’t need to insert a new one. You can simply attach the SpryMenuBarVertical.css file to the page instead by clicking the Attach Style Sheet button in the CSS Styles panel (Windows > CSS Styles).

  3. Delete the vertical Menu Bar.
  4. In Code view (View > Code), locate the MenuBarHorizontal class and change it to MenuBarVertical. The MenuBarHorizontal class is defined in the container ul tag for the menu bar (<ul id="MenuBar1" class="MenuBarHorizontal">).
  5. After the code for the menu bar, locate the menu bar constructor: 
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
  6. Remove the imgDown preload option (and comma) from the constructor:

    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

    Note: If converting from a vertical menu bar to a horizontal one, add the imgDown preload option and comma instead.

    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
  7. (Optional) If your page no longer contains any other horizontal Menu Bar widgets, delete the link to the former MenuBarHorizontal.css file in the head of the document.
  8. Save the page.

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 change

    CSS rule for vertical or horizontal menu bar

    Relevant properties and default values

    Default text

    		 ul.MenuBarVertical a, ul.MenuBarHorizontal a

    color: #333; text-decoration: none;

    Text color when mouse pointer moves over it

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

    color: #FFF;

    Text color when in focus

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

    color: #FFF;

    Menu Bar item color when mouse pointer moves over it

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

    color: #FFF;

    Submenu item color when mouse pointer moves over it

    		 ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

    color: #FFF;

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 change

    CSS rule for vertical or horizontal menu bar

    Relevant properties and default values

    Default background

    		 ul.MenuBarVertical a, ul.MenuBarHorizontal a

    background-color: #EEE;

    Background color when mouse pointer moves over it

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

    background-color: #33C;

    Background color when in focus

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

    background-color: #33C;

    Menu Bar item color when mouse pointer moves over it

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

    background-color: #33C;

    Submenu item color when mouse pointer moves over it

    		 ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

    background-color: #33C;

Change the dimension of menu items

You change the dimension of menu items by changing the width properties of the menu item’s li and 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 ul tags.

  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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy

Products

Download

Support & Learning

Buy

Company

Choose your region

Copyright © 2013 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy | Cookies

Reviewed by TRUSTe: site privacy statement