How to Create a Pop-Up Menu in Adobe Dreamweaver
A pop-up menu on a web page stays hidden until a visitor hovers over it with their mouse, which activates the drop-down list containing the website links. These menus are an effective method for providing all of your page's links in a compact and accessible way for your viewers. If you have the Adobe Dreamweaver application, you can take advantage of this dynamic feature by creating your own pop-up menus using the tools that this software provides.
Other People Are Reading
Instructions
-
Dreamweaver 9 or Later
-
1
Launch your Dreamweaver application and create a new page or open an existing one. Click "File" then "New or File" and "Open."
-
2
Place your cursor in the area that you want your drop-down menu to appear, click the "Spry" tab in the "Insert" inspector and then click the "Spry Menu Bar" button. Choose a horizontal or vertical layout in the prompt that appears and click the "OK" button when finished. This action creates the default menu in the design view.
-
-
3
Use the "Properties" inspector to add or subtract the number of list items in the menu by highlighting an item and clicking the plus or minus sign.
-
4
Assign a web address to each menu item by highlighting it and typing in the "Text," "Link" and "Title" information in the provided text boxes. This process creates the settings that take the user to the designated pages when they click on them.
-
5
Save your file and click the "Preview/Debug in Browser" button or select the "Preview in Browser" option under the "File" menu to view the pop-up menu.
Dreamweaver 8 or Earlier
-
6
Launch your Dreamweaver application and create a new page or open an existing one. Click "File," then "New or File" and "Open."
-
7
Create a link to begin creating your pop-up menu by typing the desired text in the design view, highlighting it and clicking the "Hyperlink" button in the "Insert" inspector. Alternately, you can choose this option from the "Insert" drop-down menu. Enter the prompted information, such as the URL address, in the provided text fields.
-
8
Select the link and assign a "behavior" by clicking the "Behaviors" option in the "Windows" menu. A "behavior" allows you to assign the pop-up action to your link.
-
9
Click the plus sign button on the "Behaviors" tab and navigate to "~Deprecated" and then "Show Pop-Up Menu." If you have created a pop-up menu in your version of Dreamweaver in the past, the "~Deprecated" title does not show.
-
10
Assign the required data, such as a name and URL, for each of your menu items under the "Contents" heading and then set the display of the text under "Advanced" section. Continue by specifying the orientation of the menu by choosing an option under the "Position" heading and then format the appearance of the menu, such as the height and color, under the "Advanced" section.
-
11
Save your file and view the pop-up menu on the page by selecting the "Preview in Browser" option under the "File" menu.
-
1
