Pop-up Menus
Dreamweaver Tutorial 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.
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 Behaviours.
This page is part of the SmartWebby's Free Web Design Guide, a collection of free web design tutorials, articles, tips and guidelines on effective web site design. From web design tips, techniques and ideas to HTML, CSS Styles, Fireworks and Dreamweaver tutorials you'll find all you need to know about web design right here!
SmartWebby.com is the web design flagship website of Jandus Technologies, a global provider of 'smart, innovative & fresh' best web design and rapid web programming services - highly professional, of top quality and globally affordable. Operational since January 2001, we have successfully built professional web sites for clients from all over the world (USA, UK, Canada, Australia, India, Greece, Denmark, Singapore, etc.). By creating attractive low-cost web designs that are W3C standard compliant, load-time and search engine optimized, we beat our competitors hands down comprehensively - in value, time and pricing. We specialize in Rapid SEO Web Design using Adobe Tools; W3C compliant tableless CSS & HTML/XHTML programming; Rapid ASP.net, AJAX, ASP and PHP web programming for database driven web sites and ecommerce web design; Quality Logo Design, Flash Animation and Interactive Flash Programming. No matter what your requirements are, our team of highly trained experienced web designers is capable of delivering a website that's over & above your expectations. Write to us for your free web design quote today! Also check out our Custom Web Design Packages and Professional Dreamweaver Templates for easy DIY websites templates.
