- 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
Preparing to Work
To prepare for this project, you will need to do the following:
Install both the Toggle Menu.mxp and Toggle Link Class.mxp extensions (both are behaviors). See Appendix A, "Installing Extensions," for more information.
Copy the Projects/02 folder from the CD to your hard drive. Define a new site using the Projects/02 copy as your site root.
Take a look at finished.htm (in the finished folder of the project) in every browser that you have. Depending on which browsers you used, you may have noticed that the menus look just a little bit different. You've done something that nobody elseโother than perhaps your clientโwill do.
To help you follow along, I'll be using some very consistent naming conventions. When I say menu button, I mean that which you click on that will expose the submenu. It needn't be button-shaped just because of its name. In code, MenuButton and SubMenu will be used as suffixes so that you can easily see the relationships between the elements. Don't worry, it will make sense once you get into the project.
Create a new HTML page.
In the Basic Page category, select HTML. I prefer to always make my new documents XHTML Compliant. So if you're a stickler like me, check the XHTML box in the lower-right corner.
Save the file as menu.htm.
Browser Compatibility
Toggle-O-Matic Menus has been tested for functionality in the following browsers:
Microsoft Internet Explorer 5.0 (Windows and Macintosh)
Microsoft Internet Explorer 5.5 (Windows)
Microsoft Internet Explorer 6 (Windows)
Netscape 6 and 7 (Windows and Macintosh)