Contents

 

Spry Menu Bar Overview and Structure

A Spry Menu Bar consists of a set of navigational menu buttons that display submenus when a mouse pointer 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.

The following example shows a horizontal Menu Bar, with the third menu item expanded.

Spry Menu Bar

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

The HTML code for the Menu Bar consists of 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 an unlimited number of submenu items.

The following is the HTML code for the horizontal Menu Bar:

<head>
...
<!--Link the Spry Manu Bar JavaScript library-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<!--Link the CSS style sheet that styles the menu bar. 
    You can select between horizontal and vertical-->
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" 
      type="text/css" />
</head>
<body>
<!--Create a Menu bar widget and assign classes to each element-->
<ul id="menubar1" class="MenuBarHorizontal">
   <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
       <ul>
           <li><a href="#">Item 1.1</a></li>
           <li><a href="#">Item 1.2</a></li>
           <li><a href="#">Item 1.3</a></li>
       </ul>
   </li>
   <li><a href="#">Item 2</a></li>
   <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
       <ul>
           <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
               <ul>
                   <li><a href="#">Item 3.1.1</a></li>
                   <li><a href="#">Item 3.1.2</a></li>
               </ul>
           </li>
           <li><a href="#">Item 3.2</a></li>
           <li><a href="#">Item 3.3</a></li>
       </ul>
   </li>
   <li><a href="#">Item 4</a></li>
</ul>
<!--Initialize the Menu Bar widget object-->
<script type="text/javascript">
     var menubar1 = new Spry.Widget.MenuBar("menubar1", 
                    {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", 
                     imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>

 

Note: As a best practice, try not to list every page on your site in the various levels of a menu bar. If a user has JavaScript turned off in their browser (and many do), the user can see only the top-level menu items of the menu bar.

The HTML code for the Menu Bar also includes script tags in the head of the document and after the Menu Bar’s HTML code. These tags create a JavaScript object, which makes the Menu Bar interactive. You define whether the Menu Bar will be vertical or horizontal in the main container ul tag for the Menu Bar.

You can change the appearance of any given part of the Menu Bar by editing the CSS rule that corresponds to the class names assigned to it in the HTML code. For example, to change the background color of the Menu Bar’s top-level menu items, edit the corresponding CSS rule in the SpryMenuBarHorizontal.css file. Keep in mind that changing the CSS code in the CSS file will affect all menu bars that are linked to that file.

In addition to the classes shown in the HTML code, the Menu Bar includes certain default behaviors which are a built in part of the Spry framework, and are in the SpryMenuBar.js JavaScript library file. The library file includes behaviors related to hovering.

You can change the look of the Menu Bar as it relates to these behaviors by editing the appropriate classes in one of the CSS files. If for some reason you want to remove a given behavior, you can delete the CSS rules that correspond to that behavior.

 

How to Create the Spry Menu Bar

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

    Note: You can also insert a Menu Bar using the Spry category of the Insert bar.

    Note: The Spry Menu Bar uses DHTML layers to display sections of HTML on top of other sections. If your page contains Flash content, this might cause a problem because Flash movies are always displayed on top of all other DHTML layers, so the Flash content might be displayed on top of your submenus. The workaround for this situation is to change the parameters for the Flash movie to use wmode="transparent". For more information, see www.adobe.com/go/15523.

  3. In the Property Inspector:
  • Give names to the menus/submenus in the text area
  • Add/remove menus and submenus by using the + and - buttons
  • Change the order by using the up and down arrows
  • Add links and the target where the links will be displayed

Note: To return to the Menu Bar in the Property Inspector click on the Spry Menu Bar tab located just above the menu bar in the design area.

 

Try the Horizontal Menu Bar:

At the top of the page click on the Horizontal Menu Bar to see how it works. There are no links attached.

 

Try the Vertical Menu Bar:

The table of contents is a Vertical Menu Bar. It is functional unlike the horizontal menu bar.


Top

Source: livedocs.adobe.com and Dreamweaver help