- 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
Inserting Submenu <div> Tags
You now have beautifully styled menu buttons. Don't get caught up on what the CSS means or does yet. I'll explain all that in a section near the end of the project. The important thing to note is things are taking shape now, and you're more than halfway done. Now, add the three submenus using the following steps for each:
Click the Insert Div Tag icon (it doesn't matter where your cursor is).
Choose divSubMenu from the Class drop-down list because this time you're adding a submenu.
TIP
If you don't already have ids defined for every element you want to use, you can add them anyway through the Insert DIV Tag dialog. Don't see an id you want? Simply type it into the dialog anyway.
Give the first submenu an id of firstSubMenu. Because this id isn't specified in your stylesheet, just type it in.
In the Insert drop-down, choose After Tag and select <a id="firstMenuButton"> from the List menu. This inserts each submenu after its respective menu button.
){kind=small}
Figure
2.11Click OK.
NOTE
Don't be alarmed because you don't see any submenus in Design view. You'll be able to edit your submenus after you've completed the next section.
Do the same for the second and third menus, using secondSubMenu and thirdSubMenu as the value in the ID field. Be sure to insert them after their respective menu buttons.
Save your work.