- 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
There's nothing fancy about making these menu buttons. Sure they look fancy, but the code is just a simple link. You might be thinking that a simple hyperlink will load a page in the browser when all you really want to do is expand the submenu. As long as JavaScript is enabled, the hyperlink will not be followed; the user will not leave the current page while he toggles submenus with the menu buttons. The Toggle Menu extension takes care of preventing your menu button hyperlinks from loading (if JavaScript is indeed enabled). Right now I want you to know that by providing a real hyperlink, as opposed to a null hyperlink such as javascript:; or #, it provides several benefits:
If JavaScript happens to be turned off, the hyperlink you use could take the user to another page where the submenu is visible so that the user can navigate the site as intended.
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.
TIP
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.