How to Build a Drop Down Menu Using Spry in Dreamweaver?
A drop-down menu in a Web page opens when a user clicks or hovers her mouse cursor over it. You can create drop-down menus in Dreamweaver, a website creation program, with the program's built-in Spry Menu Bar widget. Spry Menu Bar creates the drop-down menu and its framework. All you have to do is edit the menu labels and configure the menu structure to meet your needs.
Other People Are Reading
Instructions
-
-
1
Open the Dreamweaver HTML file in which you want to create a drop-down menu, or start a new HTML file by clicking the "File" menu and choosing "New." This opens the New Document dialog box. Choose "HTML" from the Type list and the desired layout from the Layout list, and then click the "Create" button.
-
2
Click the "File" menu and choose "Save As." Name and save the file in the Save As dialog box
-
-
3
Click the location on the Web page where you want to place the drop-down menu.
-
4
Click the "Insert" menu, choose "Spry," and then choose "Spry Menu Bar" from the flyout menu. This opens the Spry Menu Bar dialog box.
-
5
Select the "Horizontal" Radio button and click "OK." Dreamweaver creates a horizontal drop-down menu on the page
-
6
Go to the "Properties" panel and select "Item 1" in the first column of menu labels. The first column in the Properties panel are the top-level menu labels.
-
7
Select the existing text in the "Text" field in the Properties panel and type your first menu label.
-
8
Select the pound sign (#) in the "Link" field in the Properties panel and type the URL for this menu item.
-
9
Repeat steps 6 through 8 until you have renamed all the labels in the first column and assigned URLs to them. You can create additional top-level menu items by clicking the "Add Menu Item" button, a plus sign icon, above the column.
-
10
Select "Item 1.1" in the second column in the Properties panel. The second column contains the second-level menu labels.
-
11
Select the existing text in the "Text" field and type the label for this menu item.
-
12
Select the pound sign (#) in the "Link" field in the Properties panel and type the URL for this menu item.
-
13
Repeat steps 10 through 8 until you have renamed all the labels in the second column and assigned URLs to them. You can create additional second-level menu items by clicking the "Add Menu Item" button, a plus sign icon, above the column.
-
1
Tips & Warnings
To create third-level drop-down menu items, select the second-level menu item in the Properties panel for which you want to create a third-level menu, and then click the "Add Menu Item" button above the third column. Dreamweaver automatically creates the third-level menu item in the third column.
When you save a Web page containing a Spry menu, Dreamweaver creates supporting JavaScript and CSS files and saves them in a subfolder in the root directory of the website named SpryAssets. When you upload the Web page to a Web server, don't forget to upload the SpryAssets folder. Otherwise, your drop-down menu will not display and work properly.
References
Resources
- Photo Credit Hemera Technologies/Photos.com/Getty Images
