How to Insert a Vertical Spry Menu in Dreamweaver CS5

Written by william harrel
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Insert a Vertical Spry Menu in Dreamweaver CS5
Creating vertical menus with Dreamweaver's Spry Framework (Hemera Technologies/ Images)

Adobe Dreamweaver CS5, a Web design and development program, provides several tools to help designers create interactive websites. Among these tools, Dreamweaver's Spry Framework allows you to create Web page elements consisting of JavaScript (a popular Web page scripting language), HTML (the markup language for creating Web pages), and CSS (cascading style sheets, a style sheet language for formatting Web page elements). Dreamweaver comes with several predefined Spry Web page elements, including Spry Menu Bar, which allows you to insert vertical and horizontal flyout menus into your Web pages without having to write a lot of code.

Skill level:

Things you need

  • Adobe Dreamweaver CS3 or later

Show MoreHide


  1. 1

    Open an existing HTML page in Dreamweaver in which you want to create a vertical Spry menu, or start a new one: Click the "File" menu and choose "New." This opens the New Document dialogue box. Choose the type of page and layout you want and then click "Create."

  2. 2

    Click in the area of the Web page where you want to create a vertical menu. (If this is a new page, Dreamweaver will ask you to save the page. Click "OK." This displays the Save As dialogue box. Name and save the page.) The Spry Menu Bar dialogue box displays.

  3. 3

    Click the "Radio" button next to "Vertical," and click "OK." Dreamweaver inserts a vertical menu into your Web page.

  1. 1

    Select the menu text (i.e., "Item 1," "Item 2" and so on) and type the new label text. This allows you to change the top menu item labels. You can change the sub-menu items from Dreamweaver's Split document view.

  2. 2

    Click the "Split" button in the upper-left corner, directly below the menu bar. This places Dreamweaver in a split editing mode that allows you to edit the HTML code. Sub-menu item labels are located in HTML unordered lists, with formatting that looks like this:

    <ul id="MenuBar1" class="MenuBarVertical">

    <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>

      &lt;li&gt;&lt;a href="#"&gt;Item 1.1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1.2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1.3&lt;/a&gt;&lt;/li&gt;


  3. 3

    Select the label item you want to change (i.e., "Item 1.1" or "Item 1.2") and type the new label text. Sub-menu items associated with what top menu items are labelled accordingly. For example, sub-menu items for the top menu Item 3 are labelled "Item 3.1," "Item 3.2" and so on.

  1. 1

    Click in the menu item for which you want to change the appearance to insert the cursor.

  2. 2

    Go to the Properties panel, located beneath the document window, and click "Edit Rule." This opens the CSS Rule Definition dialogue box. From here you can change the menu item typeface, background, box shape, border and several other options.

  3. 3

    Select the appearance option you want to change in the Category list on the left side of the dialogue box. For example, if you want to change the background colour, click "Background" in the Category list, and then click the "Background-color" swatch and choose a colour from the flyout menu.

  4. 4

    Click "Apply" to apply the change. Follow this procedure to make additional appearance changes, and then click "OK" when you finish making changes.

Tips and warnings

  • You can add and delete menu items by editing the HTML unordered lists. If you want to add an item to the Item 3 submenu, for example, you would edit that list. By default, the list looks like this:
  • Item 3.1
  • Item 3.1.1
  • Item 3.1.2
  • To add another item, simply insert another list item, like this:
  • Item 3.1
  • Item 3.1.1
  • Item 3.1.2
  • Item 3.1.3
  • To make the menu list items "hot," or link them to URLs, replace the pound sign (#) between the quotation marks with the desired URL, like this: Item 3.1.2

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.