Creating Toggle-O-Matic Menus in Macromedia Dreamweaver MX 2004
- It Works Like This
- Preparing to Work
- Forging Friendly Hyperlinks to Submenus
- Time to Identify: ID Attributes for Menu Buttons
- Getting Classified
- Containing the Menu with <div> Tags
- Inserting Submenu <div> Tags
- Design Time CSS to the Rescue
- CSS Requirements
- Toggling with Extensions
- Now Try This
Angela C. Buraglia is perhaps best known as the founder of DreamweaverFAQ.com, a site dedicated to serving the Dreamweaver community which she continues to run today with Daniel Short. She is also the co-author of Dreamweaver MX 2004 Killer Tips and Dreamweaver MX Killer Tips with Joseph Lowery.
Dan Short and I were faced with redesigning DWfaq.com, and neither of us were happy with our navigational system because it wasn't very user friendly and had some design flaws. When Dreamweaver MX came out, we took one look and realized that the Panel groups would make a nice little menu system, one that any Dreamweaver user could relate to and navigate easily. I liked the menus so much that I started using them on DWmommy.com almost immediately.
When I saw Dreamweaver MX 2004, I thought about changing the menus to look like its Panel groups instead, but the Dreamweaver MX style had grown on me already. Anyway, the look of Toggle-O-Matic menus is entirely configurable with CSS, which is one reason why I really love these menus. So if your heart desires, you can style your Toggle-O-Matic menus to look like the Panel groups in Dreamweaver MX 2004, or you can find a style of your very own.
It Works Like This
Style menu buttons and submenus with CSS and then toggle the submenu's display property with the Toggle Menu extension.
Set a specific submenu to open automatically when the page has loaded using the Toggle Menus extension.
Figure 2.1 Simple hyperlinks will be converted to fancy buttons using CSS.
Figure 2.2 Using design-time CSS you'll be able to modify the content of your submenus visually in Design view.