- 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
Forging Friendly Hyperlinks to Submenus
Search engines can follow real hyperlinks, but hyperlinks in behavior actions are not followed. Search engines can't follow a null hyperlink.
When users place their pointers over the hyperlink, they'll see an actual file path in their browser's status bar. Some people are suspicious of clicking a hyperlink if they can't see where you'll be taking them (as in the case of a null hyperlink).
With those benefits in mind, it's time to get started:
Select the Hyperlink object found in the Common category of the Insert bar, or choose Insert > Hyperlink.
Set up a keyboard shortcut (Edit > Keyboard Shortcuts) for Insert > Hyperlink to get to the Hyperlink dialog even quicker. There's a Help button at the bottom of the Keyboard Shortcuts dialog if you get stuck.
Complete the Hyperlink dialog. For this project, Text and Link are the only two fields you need to complete, but if you'd like to do the rest, you're welcome. Give the menu button whatever text you like. In the demo, I used Menu One.
Repeat steps 1 and 2 for as many menu buttons as you intend to have.
I added two more menus: Menu Two and Menu Three. Right now, you should have one hyperlink directly after the next in Design or Code view. They look like plain, boring blue underlined hyperlinks, but they won't for much longer.
Click the Attach Style Sheets icon in the lower-right corner of the CSS Styles panel (Window > CSS Styles).
Click the Browse button in the Link External Stylesheet dialog, then locate and select menus.css in the root of your project folder.
Set Add As to Link, and click OK. Alright, so that isn't much of an improvement. You'll get there soon. I promise.
Save your work.