Pop-up Menus
How to use the dreamweaver behaviors panel to create pop-up menus
In this Tutorial you'll learn how to use the Dreamweaver behaviors panel to create small pop-up menus. This behavior helps to create drop-down menus, fly-out menus etc.
Prerequisite Knowledge
This Pop-Up menu tutorial teaches you how to create pop-up menus using Dreamweaver behaviors and thus assumes you are familiar with some design software, even if you are new to Adobe Dreamweaver. However be assured that our detailed instructions can be followed by even a total novice.
You Are Here ::: Home >> Free Tutorials >> Dreamweaver Tutorials >> Pop-up MenusAdobe Dreamweaver has popup generator which automatically generates CSS code and JavaScript code. For example, you can use pop-up menu to organize several navigation options that are related to a button. You can create as many submenu levels as you like in pop-up menu. Each pop-up menu item appears as an HTML or image cell, which has an Up state, an Over state, and text in both states.
Note: A pop-up menu is not the same as a graphical pop-up menu.
How to create & edit Pop-Up Menus
Pop-Up Menus can be easily created using the Show Pop-Up Menu of the Dreamweaver behaviors panel (similar to the Fireworks pop-up menu). The options can be set using the dialog box to create either a horizontal or a vertical pop-up menu. You can use this dialog box to set or modify the color, text, and position of a pop-up menu.
For Example: See our Top Links - Services, Portfolio, Rates & Deals, Web Products, Free Resources and About Us
- To create a pop-up menu for an link (either text / image), create a link, select it and open the Behaviors panel (Shift+F3).
- Click the Add (+) button and select Show Pop-Up Menu from the Actions pop-up menu.
- Set options for the pop-up menu with the help of the dialog box that appears using the following tabs:
- Contents - to set the name, structure, URL and target of individual menu items.
- Appearance - to set the appearance of the menu's State (Up / Over) and to set font choices for menu item text.
- Advanced - to set the properties of the menu cells, say width, height, color, border width, text indention, and the length of delay before the menu appears after the user moves the pointer over the trigger.
- Position - to set position of the menu relative to the triggering image or link.
- To edit a pop-up menu, first select the link and then double-click the Pop-up Menu in the Actions column of the Behaviors panel.
- Save and test your file in a web browser. That's it you've learnt how to create pop-up menus using Dreamweaver Behaviors.
Software Required
Adobe Dreamweaver (Macromedia Dreamweaver prior to version 8). Please check out the compatible versions listed in the box below. Since this tutorial series covers the core functions of Dreamweaver to create pop-up menu using Dreamweaver behaviors, mostly any version of these software should be fine.
Compatible Versions of Dreamweaver for this Tutorial
Dreamweaver 4-8 | Dreamweaver CS3 | Dreamweaver CS4/CS5/CS6Note: The instructions in this tutorial are same across all Dreamweaver versions listed above; Screenshot images (if any) may differ. Recommended Version: Dreamweaver CS6