How to Create Rollover Drop-Down Menus in Dreamweaver

Navigation is one of the most important features of a website. A good website provides a navigation system that is easy to read and understand, allowing visitors to find what they are looking for. Some websites will feature a drop-down menu displaying within a larger category. Using Dreamweaver, you can make a rollover drop-down menu to incorporate into any website.

Difficulty:

Moderate

Instructions

Things You'll Need

• PC or Macintosh computer
• Knowledge of HTML
• Dreamweaver 8.0 or higher

1. Open Dreamweaver.

2. The design phase for the website is completed in a graphics program. This includes the navigation for the website. All the main sections are named for example; about us, services, contact. For this example, the navigation will be horizontal.

3. Open the page that will have the navigation in Dreamweaver. In the design or HTML window, click or select the area where the navigation menu will be placed. In the top menu of Dreamweaver, select "Insert" then "Image." A window will open to locate the image in the images folder. This is where all the images for the website should be stored. Once the menu image is found, select "Choose" to place the image.

4. The main navigation bar is now in place. One of the menu items will need to become a section that will feature the rollover and display the drop-down. In this example, the rollover category will be "About Us." Look for the properties menu in Dreamweaver. It is usually located toward the bottom. If it is not showing, go to the top menu and select "Window" then "Properties." Within the properties window, locate the blue square toward the bottom left portion of the menu. The blue shapes are called Hot Spots. Select the blue square. Using the mouse in the design window portion of Dreamweaver, drag the mouse so the blue square appears around the rollover menu item. For example, the menu item "About Us" would be selected.

5. In the top menu in Dreamweaver, select "Window" then "Behaviors." This will open a window on the right side of Dreamweaver. Select the plus sign located on the top left. A menu will open and selections will be listed. Choose "Show Pop-Up Menu." This will open a separate window.

6. Now that the Show Pop-Up Menu is open, the list items can be created. Within the window there are four tabs. Select "Contents." In the text field, enter the name the page that will be displayed in the drop-down. For example, "History" would be listed under "About Us." In the Link field, enter the file name for the page. For example, "History" could be history.html. To add another page in the drop-down, select the plus sign at the top of the window. Repeat this step for each page to be entered in the drop-down. The page names and the file names will be listed in the window.

7. Once the pages have been listed, select the "Appearance" tab to make changes to the drop-down for font, size, text color and cell color. Use these features to add style to the drop-down area.

8. Now that styles have been applied, select the "Position" tab. Select "Below" to direct the menu items to drop below the navigation bar. Select "OK" to close the menu window.

9. Preview the menu in a browser window to view the completed rollover drop-down menu.

Tips & Warnings

• You can add as many rollover drop-down areas as you need. This article only covers adding one rollover drop-down menu.

References

• Dreamweaver
• World Wide Web Consortium (W3C)