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
This chapter is from the book
This chapter is from the book
This chapter is from the book
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
Toggle-O-Matic menus are so simple, fast, and chic that you'll find yourself toggling submenus over and over again just for fun. How the menus look is entirely up to you; they're all CSS-driven. Simply put, the CSS display property is set to none and switched to block by way of some crafty little JavaScript. The purpose of this project is to familiarize you with the possibilities. I won't be getting into CSS specifics other than what you need to know to create the toggle effect. After all, how you style your buttons is up to you. You can make the menu buttons and submenus any color, size, font, and so on that suits your needs. Here are the basic steps of the project:
Style menu buttons and submenus with CSS and then toggle the submenu's display property with the Toggle Menu extension.
Swap classes with the Toggle Class extension to set a menu button to a down state. Not to worry—all JavaScript is added painlessly via the Toggle Menus and Toggle Class extensions.
Set a specific submenu to open automatically when the page has loaded using the Toggle Menus extension.
){kind=small}
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.