RU EN

Mobile-friendly menu with JQuery plugin mmenu

2 July, 2019

In this article I will tell about how to create mobile-friendly menu for your website. I want to discuss a plugin for jQuery called mmenu(you may visit previous link to download plugin and right away see how the menu will look like). We will use plugin by the reason of that our way is to reuse groundwork. So let's get started.

Including

The plugin author advises to use html 5 doctype, well, here I think we don’t need alternatives, let's use it. In head area of our document including JQuery itself, and two plugin files.

<head>
   <script src="jquery/jquery.js" type="text/javascript"></script>
   <script src="mmenu/dist/js/jquery.mmenu.min.js" type="text/javascript"></script>
   <link href="mmenu/dist/css/jquery.mmenu.css" type="text/css" rel="stylesheet" />
If we need on-canvas menu, then we should to include jquery.mmenu.oncanvas.min.js and jquery.mmenu.oncanvas.css. On-canvas is a type of mmenu, which has position:absolute; width:100%; height:100% , which streеches it on the full screen.

Creating menu

The menu is created very simply - like an unordered html list, the plugin supports nesting of lists. All this should be wrapped in a nav tag with an id property set.

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a>
         <ul>
            <li><a href="/about/history/">History</a></li>
            <li><a href="/about/team/">The team</a></li>
            <li><a href="/about/address/">Our address</a></li>
         </ul>
      </li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

Menu styles

1. If a plugin encounters a nested list, then inside the parent li tag adds a link to the one that already exists inside this li. Clicking on the added link opens a submenu. To make a menu item a link to a submenu completely, and not two links, you need to use the span tag.

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><span>About us</span>
         <ul class="Vertical">
            <li><a href="/about/history/">History</a></li>
            <li><a href="/about/team/">The team</a></li>
            <li><a href="/about/address/">Our address</a></li>
         </ul>
      </li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>
2. To make the submenu always visible, add the class “Inset” to it. 3. Add the "Selected" class to the menu item to make it selected. 4. You can create separators as follows

<nav id="my-menu">
   <ul>
      <li class="Divider">Website</li>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

Javascript

You will need a button, clicking on which would open the menu. I advise you to use these burgers. On previously metioned link you may read how to use them. In short, you will need to download hamburger styles, connect them to the page, and add some such html-code.

<button id="mmenu-icon" class="Fixed hamburger hamburger--collapse" type="button">
     <span class="hamburger-box">
         <span class="hamburger-inner"></span>
     </span>
</button>
I used the Fixed class to set position: fixed To make our mobile menu work, it remains only to connect the following javascript code to the page.

$(document).ready(function() {
    var $menu = $("#my-menu").mmenu();
    var $icon = $("#mmenu-icon");
    var API = $menu.data( "mmenu" );
    $icon.on( "click", function() {
        API.open();
    });

    API.bind( "opened", function() {
       setTimeout(function() {
          $icon.addClass( "is-active" );
       }, 100);
       $icon.on( "click", function() {
          API.close();
       });
   });

   API.bind( "closed", function() {
      setTimeout(function() {
         $icon.removeClass( "is-active" );
      }, 100);
      $icon.on( "click", function() {
         API.open();
      });
   });
});

Issues

Using mmenu I ran into two problems. At first, I tried to wrap the entire body content in a div tag, because it was necessary for the plugin to work. But in this case, for some reason, he hid all the content that I wrapped. Therefore, I refused it. If you do not wrap everything in your body in a div, then the plugin will do it for you. But there will be problems with double launch of js-scripts and others. After that, I immediately ran into the second problem: the plugin wraps nothing but the div. That is, if you have h1 directly inside the body (body > h1), such as I had, then mmenu will miss them and will wrap the divs that follow him.I decided this simply by wrapping all the other tags in a div, so that directly inside the body there are only divs. It all worked for me. I hope this article was useful to you.