How to Create an Expandable Menu in Dreamweaver
An expandable menu allows you to add several navigation links to your website without taking up much screen space. When a visitor to your website moves the mouse cursor over a section in the expandable menu the section opens a list of links. When the mouse cursor leaves the section the list of items collapses. Use the Spry Menu Bar widget in Adobe's Dreamweaver Web development software to create an expandable menu for your website.
Other People Are Reading
Instructions
-
-
1
Launch Dreamweaver and click "HTML" to create a new HTML document.
-
2
Open the "Insert" menu, and select "Layout Objects," then click "Spry Menu Bar."
-
-
3
Click "OK" when Dreamweaver tells you that you must save the document before adding a widget. Type a name for the document and click "Save."
-
4
Click "Horizontal" or "Vertical" in the dialog box that opens, depending on the menu style you want to create. Click "OK," then Dreamweaver creates a menu bar containing four expandable sections.
-
5
Click the "Spry Menubar" heading at the top of the menu. Click "Item 1" at the bottom of the screen, then type the name of the first menu section into the "Text" field.
-
6
Click "Item 1.1" to expand the first menu section. Type the text for the first menu item in the expanded section into the "Text" field. Type or paste the link that you want the menu item to open into the "Link" field.
-
7
Click "Item 1.2" and enter the information for this menu item. Repeat the process for the rest of the items; to add additional items to the menu section, click the "+" icon.
-
8
Click "Item 2," then add items to this section of the menu and enter their information as before. Repeat the process for the rest of the sections in the menu.
-
9
Press the "F12" key when you're finished creating the menu. Click "Yes," then "OK." Dreamweaver opens the menu in your Internet browser. Switch to the newly opened browser window, then move the mouse cursor over a section in the menu to expand it.
-
1
