- 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
Time to Identify: ID Attributes for Menu Buttons
Each menu button requires a unique id attribute that will be used in the JavaScript that toggles the submenus. This is the easiest way to add an id to the hyperlinks you've already created:
If the Tag inspector isn't visible, choose Window > Tag Inspector or press the F9 keyboard shortcut.
If it is not already visible, select the Attributes tab of the Tag inspector.
NOTE
The Tag inspector's panel group name includes the tag you've selected, in this case <a>. I find this helpful because it lets me know that I have the right HTML element selected.
Click on the first Menu Button hyperlink in Design view.
If it isn't already shown, change the Tag inspector to the Show List view by clicking the Show List View icon.
NOTE
If you prefer the Show Category view, you'll find id listed there too, under the CSS/Accessibility section. I find the Show List view quick and easy, because I can see all attributes at a glance, sorted alphabetically.
In the right column, across from the id attribute, type in a unique id for the selected hyperlink. Call the first one firstMenuButton.
Remember, I told you near the beginning of the chapter that you'll be using MenuButton as a suffix for all references to menu buttons? Next, you'll need to add the id attribute to the remaining two menu button hyperlinks.
)
Figure
2.6Click on the next menu button hyperlink in Design view.
Assign the hyperlink a unique id as you did in step 5. Use an id of secondMenuButton. Click on the third menu button hyperlink and assign an id of thirdMenuButton.
Save your document.