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:
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.
