View comments | RSS feed


Menu Bar widget overview and structure

A Menu Bar widget is 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 widget, with the third menu item expanded.

View full size graphic
Menu Bar widget (consists of <ul>, <li>, and <a> tags)

Menu item has submenu

Submenu item has submenu

The HTML code for the Menu Bar widget 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.

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 widget 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 widget will be vertical or horizontal in the main container ul tag for the Menu Bar. Following is the HTML code for a horizontal Menu Bar widget:

<!--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" />
<!--Create a Menu bar widget and assign classes to each element-->
<ul id="menubar1" class="MenuBarHorizontal">
	<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
			<li><a href="#">Item 1.1</a></li>
			<li><a href="#">Item 1.2</a></li>
			<li><a href="#">Item 1.3</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
			<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
					<li><a href="#">Item 3.1.1</a></li>
					<li><a href="#">Item 3.1.2</a></li>
			<li><a href="#">Item 3.2</a></li>
			<li><a href="#">Item 3.3</a></li>
	<li><a href="#">Item 4</a></li>
<!--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"});

In the code, the new JavaScript operator initializes the Menu Bar object, and transforms the ul content with the ID of menubar1 from static HTML code into an interactive page element. The Spry.Widget.MenuBar method is a constructor in the Spry framework that creates Menu Bar objects, and the information necessary to initialize the object is contained in the MenuBar.js JavaScript library that you linked to in the head of the document.

Many of the a tags that create the widget contain a CSS class. These classes control the style of the Menu Bar widget, and exist in the accompanying CSS file, SpryMenuBarHorizontal.css or SpryMenuBarVertical.css, depending on your selection.

You can change the appearance of any given part of the Menu Bar widget 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 SpryManuBarHorizontal.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 widget includes certain default behaviors that are attached to the widget. These behaviors 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.


Comments are no longer accepted for Spry 1.4. Spry 1.6 is the current version. To discuss Spry 1.4, please use the Adobe forum.


robarts said on Jun 3, 2007 at 8:59 AM :
As a GoLive user, it would be helpful if this section had a video showing
how to edit the pull downs: change font, change font color, width, depth, or
if possible, add an image to the background of the pull down.

These instructions don't go into enough detail for a Dreamweaver newbie.
No screen name said on Jul 30, 2007 at 12:32 PM :
I got here from the Adobe help viewer, which does list a video as well:

For a tutorial on creating a Spry Menu Bar, see
FILMLOVER7 said on Oct 9, 2007 at 10:07 AM :
How do we use a created Spry Menu in various Templates and have the changes to the Menu appear in all instances by just changing the "master" menu?
Donald Booth said on Nov 16, 2007 at 8:16 AM :
These are the considerations when using Spry Widgets in a SSI.
Every page that uses the widget needs to have:
The included JS and CSS files.
The markup.
The constructor underneath the markup (unless you get into loadListeners)
You can break it up by having an SSI for the included files in the head.
An SSI that includes both the markup and the constructor, or
a have the constructor in the footer SSI, or something similar.
There are many ways to set this up, as long as the end result is the same: the code is ordered correctly.
Hope this helps.
Donald Booth
Adobe Spry Team
FILMLOVER7 said on Nov 18, 2007 at 6:13 PM :
Thanks Don,
Can you please give us some examples, from beginning to ending up in a Template ... or perhaps a video. Also, can you describe how to set up the site so that it will preview?
Thanks again.
JAH-Lou said on Nov 28, 2007 at 9:26 AM :
I don't think FilmLover7's query was ever answered regarding a "master" menu. I haven't played with it but will a Snippet address this? Although - would you then have to open each page and update the Snippet? Eons ago, we addressed this with a CF Include. I've been out of the game for a few years and am feeling my way through all of the updates. I, too, would like to know how I can edit one master menu and have it reflect in all my pages without a save to each page.
CanonBoy said on Dec 10, 2007 at 11:19 AM :
How would any of this work if JavaScript is turned off? Seems all Spry widgets depend upon JavaScript being turned on?


RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: