Let’s make a mobile drawer menu with the jQuery.mmenu plugin
It’s been a few years now where nobody even thinks about making a website that’s not responsive and mobile friendly. Mobile phones and tablets have become the primary means of accessing the web for the majority of people, and providing a great experience for mobile users has become a real responsibility for every website owner.
After the website’s content itself, probably the most crucial component of any website is its main navigation as it is in many cases the only way users can navigate around a website and discover its offerings.
While a navigation menu for desktop views is arguably a solved problem and the best patterns have been concretely established for far more than a decade, we’re still not 100% percent clear on the truly best patterns for our mobile menus types, styles and UX. The most popular patterns emerged a few years back, with the hamburger triggered menu being the most prevalent. On touch it usually reveals either a drawer (which is also the most popular approach and can be placed top, left, bottom or right), a dropdown, or an expanded list.
In this small tutorial we’ll see how easy it is to create a navigation menu which turns into a hamburger drawer mobile menu using the magnificent jQuery.mmenu plugin.