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.

Basic markup

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:

  <header class="header">
    <div class="logo">
      <a href="#" class="logo-link">LOGO</a>
    </div>

    <nav class="nav">
      <ul id="navbar" class="navbar">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

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):

.header {
  padding: 20px;
  background-color: #1f749d;
  display: flex;


  a {
    color: #fff;
    text-decoration: none;
  }
}

.nav {
  margin-left: auto;
}

.navbar {
  display: flex;
  
  a {
    font-size: 14px;
    padding: 5px 10px;
  }
}

With the above code we’ve achieved the following result:

light

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!

  <header class="header">
    <div class="logo">
      <a href="#" class="logo-link">LOGO</a>
    </div>

    <nav class="nav">
      <ul id="navbar" class="navbar">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    
    <!-- This link will trigger our mobile menu powered by jQuery.mmenu -->
    <a href="#nav-mobile" class="navbar-trigger">Menu</a>
  </header>

  <!-- This empty div will host the mobile menu in a while -->
  <div id="nav-mobile"></div>

And the CSS we need to add:

.navbar-trigger {
  display: none;
  margin-left: auto;
}

@media (max-width: 500px) {
  .navbar-trigger {
    display: inline-block;
  }
  
  .nav {
    display: none;
  }
}

And here’s how this will look in mobile:

light

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:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/6.1.7/jquery.mmenu.all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/6.1.7/jquery.mmenu.all.js"></script>
<script src="scripts.js"></script>

The very last scripts.js file is our own; we’ll be adding our relevant JavaScript code there which will initialize and configure our mobile menu.

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.

This wrapper 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.

In the scripts.js file let’s simply clone our main menu and append it where we want:

jQuery(function ($) {
  var $navbar = $('#navbar');
  var $mobileNav = $('#nav-mobile');
  
  $navbar
    .clone()
    .removeClass('navbar') // Removing this class so that all the custom desktop styling is gone
    .appendTo($mobileNav);
});

Now all we have to do is simply initialize jQuery.mmenu on our mobile nav wrapper:

...

  $mobileNav.mmenu({
    offCanvas: {
      position: 'left', // Show it coming from the left
      zposition: 'front',
    }
  });

...

Our full scripts.js file:

jQuery(function ($) {
  var $navbar = $('#navbar');
  var $mobileNav = $('#nav-mobile');
  
  $navbar
    .clone()
    .removeClass('navbar')
    .appendTo($mobileNav);
  
  $mobileNav.mmenu({
    offCanvas: {
      position: 'left',
      zposition: 'front',
    }
  });
});

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):

light

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!