- 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
Now Try This
By now you've learned how to style menu buttons and submenus with CSS. You've also learned how to toggle the submenu's display property with the Toggle Menu extension, swap classes with the Toggle Class extension to set a menu button to a down state, and last, how to set a submenu to open automatically when the page has loaded.
Here are some ideas on how to apply the skills you've learned or use the project you've completed in other ways:
In all actuality, you're not limited to creating menus with the techniques you've learned in this project. For example, you could create an FAQ (Frequently Asked Questions) list that displays only the questions as links, and then the answers could be toggled beneath them. Take a look at faq.htm in the NowTryThis folder for an example. You'll notice that only the Toggle Menu's extension was used for this example. You could take it further by using the Toggle Link Class extension, as well.
If it's another menu system you're after, try creating a tree/file menu system. This look can be achieved using styled bulleted lists instead of <div> tags. Take a few minutes to examine the code in treemenu.htm inside the NowTryThis folder to see one way this type of menu can be achieved.