Drop-down menus can help keep your website looking neat and tidy, particularly if you run an extensive site with numerous navigation links. The Adobe Dreamweaver CS5 website design program includes a selection of widgets that allow you to add drop-down menus and other complex navigation and design features to web pages without the need for complicated coding or programming knowledge. To make a drop-down menu in Adobe Dreamweaver CS5, use the program's standard Spry widget.
- Skill level:
Other People Are Reading
Open the Web page on which you want to add a drop-down menu in Adobe Dreamweaver CS5. After creating the drop-down menu on one page, you can copy and paste it to any other page on your site to ensure all pages have the same navigational structure.
Click the "Insert" tab in the right sidebar to toggle the Insert panel into view. If you can't see the Insert panel, click "Window" in the main menu bar, and then choose "Insert" in the drop-down list.
Click the down-arrow button at the top of the Insert panel, and then click the "Spry" to launch the Spry Insert panel. Select "Spry Menu Bar" and click to enable either the horizontal or vertical menu bar option in the dialog window. Choose the option that best matches the design of your website. Click the "OK" button.
Click the blue Spry Menu Bar design element in the workspace screen to launch the Properties Inspector panel at the bottom of the screen. Click "Item 1" and type a menu item name in the "Text" input field. Press the "Return" or "Enter" key on your computer keyboard to save the menu item name. Click the "Item 1.1" sub-item field and enter and save a name in the same way. Repeat this step for each drop-down menu sub-item that you want to include in the first drop-down menu. Click the "Item 2" and "Item 3" main menu items, and add sub-items using the same method until you have created the required number of drop-down menus. You can add as many main menu items and sub-items as you wish.
Click to select any menu item or sub-item that you want to turn into a navigation link. Type the URL address for the Web page in the "Link" field for each menu item, and then press "Return" or "Enter" on your computer keyboard. Repeat this step until you have assigned navigation links to all items in the drop-down menus.
Click "File" followed by "Save" to store your changes and add the drop-down menu to the Web page. Upload the saved Web page and the Spry folder to your website with your usual online content management system or File Transfer Protocol application.
Tips and warnings
- Ensure you upload the contents of the locally-stored Spry folder to your website in addition to the saved Web page or the drop-down menus will not work.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for