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.
For our example we’ll create a minimal header component with some basic HTML and CSS; pretty straightforward stuff as as starting point.
A standard header with a brand logo on the left and our navigation on the right would require the following markup:
Our header element contains a logo and the navigation menu, which is simply an unordered list of links. The layout styling is similarly simple (we’ll be using Sass for this example):
With the above code we’ve achieved the following result:
Making it mobile friendly
The basic concept now is that under a certain CSS breakpoint (let’s say we want to start our mobile styles at a viewport width of 500 pixels) we want to hide our desktop navigation menu and show a mobile navigation trigger link (which can be either a simple “Menu” label or a hamburger icon).
In order to do that we’ll add the mobile trigger link in our header element and use CSS Media Queries to handle visibility.
We’ll also add an empty div element which we’ll later use to host our mobile menu!
And the CSS we need to add:
And here’s how this will look in mobile:
Adding jQuery.mmenu in the mix
Time to actually make our drawer!
First we need to add our dependencies, jQuery and the actual jQuery.mmenu plugin’s script and styles:
The very last
The way jQuery.mmenu works is very simple: At its basic functionality the plugin expects a wrapper
div (remember the one we added before?) containing an unordered list (the menu). The menu doesn’t really have to be an unordered list, it can be anything, but that’s what we’ll be using.
div then will have to have an
id attribute (in our case it’s
#nav-mobile) and then gets automatically triggered by any link with its
href attribute set to that id (e.g.
<a href="#nav-mobile">Menu</a>). jQuery.mmenu handles that last step automagically for us!
With that said, the next part we’d need to do is somehow inject our main nav inside that
#nav-mobile wrapper. We could just duplicate our code and hardcode it twice in our website (once inside the desktop nav and once in
#nav-mobile), but we can be smarter about it.
scripts.js file let’s simply clone our main menu and append it where we want:
Now all we have to do is simply initialize jQuery.mmenu on our mobile nav wrapper:
And that’s it! We have a fully working mobile menu which lives inside a drawer, triggered any time we press our “hamburger” link!
Here’s how the final result would look on mobile (click on the “Menu” link on the header):
jQuery.mmenu is a powerful plugin and we haven’t even scratched the surface of its possibilities. From simple drawers like the one we’ve just created to navigating fully mobile views a là iOS settings pages, or building completely custom content on top of it. Stay tuned for this kind of functionality in a future tutorial!
What do you usually use to build your mobile menus? Have you used jQuery.mmenu in any of your projects and how? Make sure to share in the comments section!