Summary

The menu widget is an excellent way of saving space on your page by organizing related (or even completely unrelated) sections of content that can be shown or hidden with simple click input from your visitors.

Let's review what was covered in this chapter. We first looked at how, with just a little underlying HTML and a single line of jQuery-flavored JavaScript, we can implement the default menu widget. We then took a look at the CSS classes and menu options that are available for you to use to customize the menu to your needs, and how you can use some of these attributes to great effect when styling the menu. We also covered the range of methods and events that we can use to perform actions or react to events triggered by the menu widget.

We finished with a look at some examples of how you can completely alter the look of the menu, while still maintaining the original markup. We used three examples of customizing a <select> menu, enhancing a button, as well as turning a menu...