App look-like menus with sliding submenus – Mmenu.js

Menu & Nav
File Size: 24.68 KB
Views Total: 1960 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

Mmenu.js is a light weight robust JavaScript/jQuery plugin for creating responsive, accessible, modular, flexible, mobile-friendly, and app-like sliding menus for your mobile website, all with an unlimited amount of submenus. It create a amazing off-canvas menu for mobile and desktop websites, with the exact look and feel of the mmenu.js plugin.

Table of Contents

How to use it:

1. Include Mmenu plugin’s JavaScript on the 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 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 choice on the page. All possible CSS exensions:

mmenu.borderstyle.css: Add an indented border to the menu. Available styles: 'border-full' and 'border-none'.
mmenu.effects.css: Apply apply additional effects to the menu. Available styles: 'fx-menu-slide', 'fx-panels-none', 'fx-panels-slide-0', 'fx-panels-slide-100'.
mmenu.fullscreen.css: Enables fullscreen menu.
mmenu.listview.css: Make the menu items vertically justified. Available styles: 'listview-justify'.
mmenu.multiline.css: Truncate menu items to a single line.
mmenu.pagedim.css: Dim out the page. Available styles: 'pagedim', 'pagedim-white', 'pagedim-black'.
mmenu.popup.css: Open the menu as a popup.
mmenu.positioning.css: Re-position the menu. Available styles: 'position-right', 'position-top', 'position-bottom', 'position-front'.
mmenu.shadows.css: Add a shadow effect to the menu. Available styles: 'shadow-menu', 'shadow-page', 'shadow-panels'.
mmenu.themes.css: Additional themes. Available themes: 'theme-light', 'theme-dark', 'theme-black', 'theme-white'.
mmenu.tileview.css: Enable tileview layout. Available styles: 'mm-tileview-xs', 'mm-tileview-s', 'mm-tileview-l', 'mm-tileview-xl'.
// 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 supports multi-level navigation menus using 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 intialize 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="https://www.jquerypost.com/category/menu-nav/">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="http://www.jquerypost.com/category/time-clock/">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="https:http://www.jquerypost.com/tag/scroll/">Scroll</a> bug fix addon options
      scrollBugFix: {
        fix: true // fix the scroll bug on touchscreens
      }

});

Done

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.

Related jQuery Plugins

You Might Also Like