• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

It Works Like This

Toggle-O-Matic menus are so simple, fast, and chic that you’ll find yourself toggling submenus over and over again just for fun. How the menus look is entirely up to you; they’re all CSS-driven. Simply put, the CSS display property is set to none and switched to block by way of some crafty little JavaScript. The purpose of this project is to familiarize you with the possibilities. I won’t be getting into CSS specifics other than what you need to know to create the toggle effect. After all, how you style your buttons is up to you. You can make the menu buttons and submenus any color, size, font, and so on that suits your needs. Here are the basic steps of the project:

1.
Style menu buttons and submenus with CSS and then toggle the submenu’s display property with the Toggle Menu extension.

2.
Swap classes with the Toggle Class extension to set a menu button to a down state. Not to worry—all JavaScript is added painlessly via the Toggle Menus and Toggle Class extensions.

3.
Set a specific submenu to open automatically when the page has loaded using the Toggle Menus extension.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint