- 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
CSS Requirements
I've made it real easy for you by providing the working CSS files. If you want to create your own menu button and submenu styles, there are only a few things you need to know that are required for the Toggle-O-Matic menu system to work.
Menu Buttons
In this project, the custom class for menu buttons is called a.aMenuButton. For the hyperlinks to stack upon each other vertically, you need to have display: block; in the menu button's class declaration. This tells the browser to display the hyperlink as a block-level element instead of its default, which is inline.
If you'd like to have another style for menu buttons when their submenu is exposed, you'll need to have a separate custom class. You'll find a.aMenuButtonDown defined in menus.css for that purpose. Typically, all you'd change here are any colors and the background image.
Listing 2.1
/* Menu Button Styles */ #divMenu a.aMenuButton, #divMenu a.aMenuButtonDown { background-color: #7B83B5; border: 1px solid #5B667B; border-top: none; padding: 2px 0px 2px 25px; font: bold small-caps 80% Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: none; background-repeat: no-repeat; background-position: 3px 50%; display: block; } /* Set menu button's image */ #divMenu a.aMenuButton { background-image: url(assets/images/inactive.gif); } /* Change menu button's image on hover and when down */ #divMenu a.aMenuButton:hover, #divMenu a.aMenuButtonDown { background-image: url(assets/images/expand.gif); } /* Submenu Styles */ div.divSubMenu { background:#FFFFFF; color:#333333; text-indent: 18px; padding: 5px; border: 1px solid #5B667B; font-size:90%; display: none; }
Submenus
The custom class for the submenus, div.divSubMenu, needs to have display: none; in its style declaration. By setting the display property to none, you will be hiding the submenus both in Design view and the browser. Because you can't see the submenus while you work in Dreamweaver's Design view, you have a Design Time Style Sheet (dtMenus.css) that contains div.divSubMenu set to display:block!important;.
NOTE
Keep in mind that none of these custom classes should have any positioning properties. The elements need to be relative to each other so that the elements below the submenus are moved as the menus are toggled and not covered up.