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. To do so, alter the HTML code for the menu bar and make sure you have the correct CSS file in your website.

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

Make sure you have the SpryMenuBarVertical.css file in your website. (For example, you might store this file in a SpryAssets folder somewhere in the site.)
Replace the link to the SpryMenuBarHorizontal.css file with a link to the SpryMenuBarVertical.css file in the head of your document, as follows:
```
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
```
Locate the MenuBarHorizontal class in the HTML code for the horizontal menu bar, and change it to MenuBarVertical. The MenuBarHorizontal class is defined in the container ul tag for the menu bar (<ul id="menubar1" class="MenuBarHorizontal">).

After the code for the menu bar, locate the menu bar constructor:

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

Remove the imgDown preload option (and comma) from the constructor:
```
var mb1 = new Spry.Widget.MenuBar("menubar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
```
Note: If you are converting from a vertical menu bar to a horizontal menu bar, add the imgDown preload option and comma instead.
(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.
Save the page.