- 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
Toggling with Extensions
This part is going to be very easy. In this section you'll apply two extensions to each of the menu button hyperlinks. The first one, Toggle Menu, uses JavaScript to check the display property of the specified submenu. If it is set to none, then it switches it to block and vice versa. The second behavior you'll apply is Toggle Link Class, which switches the style of the menu button (a.aMenuButton) to its down state (a.aMenuButtonDown).
TIP
It is a good idea to work in Code and Design view at the same time so that you can make selections in Design view while having the code in Code view while you use the extensions. You'll need to know the selected menu button's id for this part, and you'll have to cancel out of the dialog to find it if you can't remember and you don't have it in front of you.
While selecting the menu button hyperlink in Design view, click the (+) Add Behavior button in the Behaviors panel (Window > Behaviors or Shift+F3) and select DWfaq > Toggle Menu to bring up the Toggle Menu dialog.
)
Figure
2.15Click the listed submenu id that corresponds to the menu button you've selected. Click the Select button. You should see (Selected) appear beside the submenu's name. Click OK.
)
Figure
2.16Verify that the event has been set to onClick in the Behaviors panel. If the behaviors have not been set to onClick, be sure to change them by choosing onClick from the list menu in the Behaviors panel.
TIP
You can apply the same Toggle Menu and Toggle Link Class behaviors to the <body> tag onLoad to display a submenu when the page loads. For extra fun, create a Toggle All hyperlink and select every layer in the Toggle Class extension. It's possible to choose more than one <div> at a time in the extension.
NOTE
If onClick is not listed as an option, click the (+) Add Behavior button in the Behaviors panel and select Show Events For > 4.0 and Later Browsers.
While selecting the menu button hyperlink in Design view, click the (+) Add Behavior button in the Behaviors panel (Window > Behaviors) and select DWfaq > Toggle Link Class. In the Toggle Menu dialog that appears, you'll see a list of Elements that have id attributes defined.
Click the menu button's id in the list and select the class for the menu button's down state, aMenuButtonDown, and click OK.
)
Figure
2.17Be sure that the event listed for Toggle Link Class is set to onClick.
)
Figure
2.18Repeat steps 1 through 5 for each menu button.
Save your work.
TIP
You may consider using a Dreamweaver Library Item to contain the Toggle-O-Matic menu system so that when you need to do updates, you just modify one file and Dreamweaver will update all files that use the Library Item for you.
If you have access to a server that can process Server Side Includes, I would advise using SSIs so that you can upload just the menu file, rather than all files that use the menu when you do updates. For information on how to use SSI, see Daniel Short's tutorial at http://www.dwmagic.com/go/12.