Responsive menus

In Chapter 4, Building an Interactive Navigation Menu, we made great use of the Superfish plugin to create animated drop-down and fly-out menus. The gorgeous menus we can create with Superfish are nice, but they're not going to work very nicely for us if we're making a responsive design. On wider screen sizes, the menus will work great, but as we start to use smaller screens like those found on mobile devices, we'll lose all the benefits of the Superfish plugin.

A convention is quickly being established for responsive menus: on screen sizes too small to display a full menu bar, the menu is collapsed to a single three-line character (☰), sometimes accompanied by the word Menu. This character is most often referred to as a hamburger, but might also be called a same-o or navigation drawer. When the hamburger is clicked, the menu opens and is available for exploration to our site visitor.

We'll take a look at how we can combine the MeanMenu jQuery plugin with Superfish to create...