Insert the Menu Bar widget

Locate the SpryMenuBar.js file and add it to your web site. You can find the SpryMenuBar.js file in the widgets/menubar directory, located in the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.
For example, create a folder called SpryAssets in the root folder of your web site, and move the SpryMenuBar.js file to it. The SpryMenuBar.js file contains all of the information necessary for making the Menu Bar widget interactive.
Locate the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file (depending on which kind of menu bar you want to create), and add it to your web site. You might choose to add it to the main directory, a SpryAssets directory, or to a CSS directory if you have one.
Open the web page to add the Menu Bar widget to and link the SpryMenuBar.js file to the page by inserting the following script tag in the page’s head tag:
```
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> 
```
Make sure that the file path to the SpryMenuBar.js file is correct. This path varies depending on where you’ve placed the file in your web site.
Link the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file to your web page by inserting the following link tag in the page’s head tag:
```
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> 
```
Make sure that the file path to the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file is correct. This path varies depending on where you’ve placed the file in your web site.
Add the menu bar HTML code to your web page by inserting a ul tag as a container tag, and then li tags with some sample text for each top-level menu item in the menu bar, as follows:
```
<body>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
</body> 
```

Wrap the text of the li tags with a tags:

<body>
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
	</ul>
</body>

Nest another unordered list (including a tags) in the third menu item (or any other menu item), as follows:

<body>
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a>
			<ul>
				<li><a href="#">Submenu Item 1</a></li>
				<li><a href="#">Submenu Item 2</a></li>
			</ul>
		</li>
		<li><a href="#">Item 4</a></li>
	</ul>
</body>

This nested unordered list is the submenu for the third menu item. Make sure that the nested list is not within the a tag of the top-level menu item.

Add a unique ID that identifies the menu bar container (ul tag), as follows:

<body>
	<ul id="menubar1">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a>
			<ul>
				<li><a href="#">Submenu Item 1</a></li>
				<li><a href="#">Submenu Item 2</a></li>
			</ul>
		</li>
		<li><a href="#">Item 4</a></li>
	</ul>
</body>

Later, you’ll use this ID to identify the container in the widget constructor.

To add styling to the menu bar, add the appropriate classes, as follows:

<body>
	<ul id="menubar1" class="MenuBarHorizontal">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#" class="MenuBarItemSubmenu">Item 3</a>
			<ul>
				<li><a href="#">Submenu Item 1</a></li>
				<li><a href="#">Submenu Item 2</a></li>
			</ul>
		</li>
		<li><a href="#">Item 4</a></li>
	</ul>
</body>

Identify whether you’re creating a horizontal menu bar or a vertical menu bar. Assign the MenuBarItemSubmenu class to a tags when top-level menu bar items have submenus. This class displays a down-arrow image that lets the user know submenu is present.

To initialize the Spry menu bar object, insert the following script block after the HTML code for the Menu Bar widget:
```
<ul id="menubar1" class="MenuBarHorizontal">
. . .
</ul>
<script type="text/javascript">
	var mb1 = new Spry.Widget.MenuBar("menubar1");
</script> 
```
The new JavaScript operator initializes the Menu Bar widget object, and transforms the ul content with the ID of menubar1 from static HTML code into an interactive menu bar object. The Spry.Widget.MenuBar method is a constructor in the Spry framework that creates menu bar objects. The information necessary to initialize the object is contained in the SpryMenuBar.js JavaScript library that you linked to at the beginning of this procedure.

Make sure that the ID of the menu bar’s ul container tag matches the ID parameter you specified in the Spry.Widgets.MenuBar method. Make sure that the JavaScript call comes after the HTML code for the widget.

Save the page.

The complete code looks as follows:

<head>
...
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<ul id="menubar1" class="MenuBarHorizontal">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#" class="MenuBarItemSubmenu">Item 3</a>
			<ul>
				<li><a href="#">Submenu Item 1</a></li>
				<li><a href="#">Submenu Item 2</a></li>
			</ul>
		</li>
		<li><a href="#">Item 4</a></li>
	</ul>
<script type="text/javascript">
	var mb1 = new Spry.Widget.MenuBar("menubar1");
</script>
</body>

Note: The Spry Menu Bar widget uses DHTML layers to display sections of HTML code 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 content to use wmode="transparent". For more information, see www.adobe.com/go/15523.