Create a Beautiful Mobile App-Like Sliding Menu

Mmenu is the best JavaScript plugin for both on and off-canvas(hamburger menu) menus with sliding submenus for your website and web app. It is very customizable with a wide range of options, plugins, and add-ons and will always suit your needs.

How to make use of it:

Installation:

# NPM
$ npm install jquery.mmenu

# Bower
$ bower install jquery.mmenu

1. Include Mmenu plugin’s JavaScript on the internet web page.

<!-- v8 Vanilla JS Version -->
<!-- polyfills are needed for Internet Explorer 10 and 11 -->
<script src="mmenu.js"></script>
<script src="mmenu.polyfills.js"></script>
<!-- v7 jQuery Version -->
<script src="jquery.min.js"></script>
<script src="jquery.mmenu.js"></script>

2. Include the required CSS file on the web page.

<!-- v8 Vanilla JS Version -->
<link rel="stylesheet" href="mmenu.css" />
<!-- v7 jQuery Version -->
<link rel="stylesheet" href="jquery.mmenu.css" />

3. Include an extension of your alternative on the web page. All doable CSS extensions:

// v8 Vanilla JS Version
document.addEventListener(
  "DOMContentLoaded", () => {
    new Mmenu( "nav#menu",{
        extensions: ["border-full"]
    });
  }
);

// v7 jQuery Version
$(function() {
  $('nav#menu').mmenu({
    extensions: ["border-full"]
  });
});

4. Create a nav list for the mmenu. The plugin helps multi-level navigation menus utilizing nested HTML lists.

<nav id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><span>About us</span>
      <ul>
        <li><a href="#">History</a></li>
        <li><span>The team</span>
          <ul>
            <li><a href="#">Management</a></li>
            <li><a href="#">Sales</a></li>
            <li><a href="#">Development</a></li>
          </ul>
        </li>
        <li><a href="#">Our address</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li class="Divider">Other demos</li>
    <li><a href="#">Advanced demo</a></li>
  </ul>
</nav>

5. Create a hamburger button to toggle the mmenu.

<a href="#menu"><span></span></a>

6. Attach the plugin to the nav list to initialize the mmenu.

// v8 Vanilla JS Version
document.addEventListener(
  "DOMContentLoaded", () => {
    new Mmenu( "nav#menu" );
  }
);

// v7 jQuery Version
$(function() {
  $('nav#menu').mmenu();
});

7. Default options to customize the menu.

new Mmenu( "nav#menu",{

      // A collection of extension names to enable for the menu.
      extensions: [],

      // navbar options
      navbar: {
        add: true,
        sticky: true,
        title: "<a href="#!">Menu</a>",
        titleLink: "parent"
      },

      onClick: {
        // whether or not the menu should close after clicking a link inside it.
        close: false,
        // prevent the default behavior for the clicked link
        preventDefault: null,
        // the clicked link should be visibly "selected".
        setSelected   : true
      },

      // the submenus comes sliding in from the right.
      slidingSubmenus: true,

      // a collection of framework wrappers to enable for the menu.
      wrappers: [],

      // off-canvas addon options
      offCanvas: {
        // Whether or not to block the user from using the page while the menu is opened.
        // If set to "modal", clicking outside the menu does not close it.
        blockUI: true,
        // Whether or not the page should inherit the background of the body when the menu opens.
        moveBackground: true
      },

      // Screen reader addon options
      screenReader: {
        // Whether or not to automatically add and up<a href="#!">date</a> the aria-hidden and aria-haspopup attributes.
        aria: true ,
        // Whether or not to add a "screen reader only" text for anchors that normally don't have text.
        text: true
      },

      // <a href="#!">Scroll</a> bug fix addon options
      scrollBugFix: {
        fix: true // fix the scroll bug on touchscreens
      }

});

8. Possible configurations that might be handed because of the third parameter to the mmenu technique.

new Mmenu( "nav#menu",{
    // options here
},{
    // CSS classes
    classNames: {
      divider: "Divider",
      inset: "Inset",
      panel: "Panel",
      selected: "Selected",
      spacer: "Spacer",
      vertical: "Vertical"
    },

    // supported languages: "de", "en", "fa", "nl", "ru"
    language: 'en',

    // The number of milliseconds between opening/closing the menu and panels,
    // needed to force CSS transitions.
    openingInterval: 25,

    // jQuery selector containing the node-type of panels.
    panelNodetype: 'ul, ol, div',

    // The number of milliseconds used in the CSS transitions.
    transitionDuration: 400,

    // off-canvas addon configs
    offCanvas: {
      // Whether or not to clone the original menu
      clone: false,
      // Whether or not the page should inherit the background of the body when the menu opens.
      menu: {
        // how to insert the menu
        // "prepend" or "append"
        insertMethod: "prepend",
        // where to insert the menu
        insertSelector: "body"
      },
      page: {
        // page node
        nodetype: "div",
        // default selector
        selector: "body > ",
        // array of query selectors to exclude from the page.
        noSelector: []
      },
    },

    // Screen reader addon configs
    screenReader: {
      text: {
        closeMenu: "Close menu",
        closeSubmenu: "Close submenu",
        openSubmenu: "Open submenu",
        toggleSubmenu: "Toggle submenu"
      }
    }

});

9. API strategies.

// v8 Vanilla JS Version
document.addEventListener(
  "DOMContentLoaded", () => {
    const myMenu = Mmenu( "nav#menu");
    const api = myMenu.API;
  }
);

// v7 jQuery Version
$(function() {
  var $myMenu = $('nav#menu').mmenu();
  var api = $myMenu.data( "mmenu" );
});

// close all menus
api.closeAllPanels();

// close a specific menu
api.closePanel(Panel);

// initialize a new menu
api.initPanel(Panel);

// select an item
api.setSelected(listitem);

10. Event handlers.

// v8 Vanilla JS Version
document.addEventListener(
  "DOMContentLoaded", () => {
    new Mmenu( "nav#menu",{
        hooks: {

          "closeAllPanels:before": ( panel ) => {
            // do something
          },
          "closeAllPanels:after": ( panel ) => {
            // do something
          },
          "closePanel:before": ( panel ) => {
            // do something
          },
          "closePanel": ( panel ) => {
            // do something
          },
          "closePanel:after": ( panel ) => {
            // do something
          },
          "openPanel:before": ( panel ) => {
            // do something
          },
          "openPanel:start": ( panel ) => {
            // do something
          },
          "openPanel:finish": ( panel ) => {
            // do something
          },
          "openPanel:after": ( panel ) => {
            // do something
          },
          "setSelected:before": ( panel ) => {
            // do something
          },
          "setSelected:after": ( panel ) => {
            // do something
          },

        }
    });
  }
);

// v7 jQuery Version
$(function() {
  var $myMenu = $('nav#menu').mmenu();
  var api = $myMenu.data( "mmenu" );
  api.on(EVENTNAME,
    ( panel ) => {
      // do something
    });
  )
});

Slick and App-Like Sliding Menu Plugin, mmenu JS Plugin/Github