Dreamweaver

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. All you need to do is alter the HTML code for the menu bar and make sure you have the correct CSS file in your SpryAssets folder.

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

  1. In Dreamweaver, open the page that contains a horizontal Menu Bar widget.
  2. Insert a vertical Menu Bar widget (Insert > Spry > Spry Menu Bar) and save the page. This step ensures that the correct CSS file for a vertical menu bar is included in your site.
    Note: If your site already has a vertical Menu Bar widget somewhere else, you don’t need to insert a new one. You can simply attach the SpryMenuBarVertical.css file to the page instead by clicking the Attach Style Sheet button in the CSS Styles panel (Windows > CSS Styles).
  3. Delete the vertical Menu Bar.
  4. In Code view (View > Code), locate the MenuBarHorizontal class and change it to MenuBarVertical. The MenuBarHorizontal class is defined in the container ul tag for the menu bar (<ul id="MenuBar1" class="MenuBarHorizontal">).
  5. After the code for the menu bar, locate the menu bar constructor: 
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
  6. Remove the imgDown preload option (and comma) from the constructor: 
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    Note: If converting from a vertical menu bar to a horizontal one, add the imgDown preload option and comma instead.
  7. (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.
  8. Save the page.