Slick and App-Like Sliding Menu Plugin With jQuery - Mmenu

Slick and App-Like Sliding Menu Plugin With jQuery - Mmenu
File Size: 366 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Mmenu is a simple yet 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 supports vertical or horizontal sliding submenus and fixed header.

Licensed under the CC-BY-NC-4.0 license. Compatible with both Bootstrap 4 and Bootstrap 3.

Important Note:

The latest Mmenu (8.0+) has dropped the jQuery dependency.

For jQuery users, please download the Mmenu 7.x here.

View more:

See also:

  • jQuery mhead: A beautiful mobile navigation header to accompany the jQuery.mmenu navigation menu on your website and webapp.
  • Mmenu Light: The minimal verison of the Mmenu plugin.

Installation:

# NPM
$ npm install jquery.mmenu

# Bower
$ bower install jquery.mmenu

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: "Menu",
        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 update 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
      },

      // Scroll bug fix addon options
      scrollBugFix: {
        fix: true // fix the scroll bug on touchscreens
      }

});

8. Possible configurations which can be passed as the third parameter to the mmenu method.

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 methods.

// 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
    });
  )
});

Alternative plugins:

Changelog:

v8.4.3 (2019-11-25)

  • better title fix

v8.4.2 (2019-11-24)

  • fixed long title

v8.4.1 (2019-10-25)

  • Updated

v8.3.0 (2019-09-06)

  • Added navbar.sticky option.
  • Simplified CSS for navbar and navbars add-on.
  • Bugfixes for padding in navbars.
  • Bugfix for combining the position-right and fullscreen extensions.
  • Bugfix in the pageScroll add-on.
  • Bugfix in the dropDown add-on.
  • Bugfix in the listview extension.
  • Changed SCSS variable $mm_btnSize to 50px.
  • Changed SCSS variable $mm_listitemSize to 44px.
  • Changed SCSS variable $mm_navbarSize to $mm_listitemSize.
  • Added SCSS variable $mm_include_navbars_searchfield.
  • Added polyfills .js file for IE11 support.
  • Added fallbacks for CSS variables for IE11 support.
  • Updated drag add-on and removed Hammer.js dependency.
  • Removed support for partially using the borderStyle extension.
  • Removed border-offset from the borderStyle extension.
  • Removed support for partially using the listview extension.
  • Removed support for partially using the panels-slide-0 and panels-slide-100 effects in the effects extension.
  • Removed the menu-fade, menu-zoom, panels-zoom, panels-slide-up and panels-slide-right effects from the effects extension.
  • Removed all listitem effects from the effects extension.
  • Removed the light option from the dividers add-on.
  • Removed support for specifying a function for the navbar.title option.

v8.2.3 (2019-08-12)

  • bugfix vertical submenus

v8.2.2 (2019-07-19)

  • Updated

v8.2.1 (2019-07-13)

  • Updated

v8.1.1 (2019-06-04)

  • Moved the clone configuration option to the offCanvas add-on.
  • Bugfixes in searchfield add-on.
  • Made contents and types for navbars extendable in the navbars add-on.

v8.0.8 (2019-05-25)

  • bugfix counters add-on

v8.0.7 (2019-05-22)

  • bugfix vertical submenus

v8.0.6 (2019-05-05)

  • wordpress wrapper bugfix

v8.0.5 (2019-05-02)

  • custom build bugfix

v8.0.4 (2019-04-19)

  • clone bugfix

v8.0.3 (2019-04-16)

  • Bugfix

v7.3.3 (2019-03-14)

  • small bug fixes

v7.3.2 (2019-02-21)

  • Bugfix

v7.3.1 (2019-02-19)

  • Bugfix

v7.3 (2019-02-14)

  • Update

v7.2.3 (2019-02-03)

  • Added CSS variables for colors.
  • Added SCSS and CSS variables for top/right/bottom/left offset.
  • Added shadow-menu to the shadows extension.
  • Bugfixes

v7.2.2 (2018-11-09)

  • Bugfix

v7.2.0 (2018-09-23)

  • Added CSS variables for colors.
  • Added SCSS and CSS variables for top/right/bottom/left offset.
  • Added shadow-menu to the shadows extension.
  • Bugfixes

v7.1.0 (2018-09-14)

  • Moved RTL support from separate add-on into core, extension and add-on files.
  • Removed RTL add-on
  • Added language configuration option.
  • Added Russian translations.
  • Changed the configuration for the offCanvas add-on.
  • Replaced some SCSS variables with CSS variables with SCSS variables as a fallback.
  • Changes in SCSS variables.
  • Added fitViewport option in the dropdown add-on.
  • Removed some of the core $mm_opt_ SCSS variables.
  • Updated the screenReader add-on with adding text to the page-blocker.
  • Improved the keyboardNavigation add-on.
  • Bugfixes.

v7.0.6 (2018-07-06)

  • bootstrap 3 wrapper fix

v7.0.5 (2018-06-15)

  • bugfix

v7.0.4 (2018-06-13)

  • drag position right fix

v7.0.3 (2018-02-10)

  • drag position right fix

v7.0.1 (2018-01-06)

  • bugfix listview extension

v7.0.0 (2018-01-06)

  • Added the iconbar add-on.
  • Replaced the iconbar and widescreen extensions with the sidebar add-on.
  • Added tab like styling for the navbars add-on.
  • Updated the iconPanels add-on with new options.
  • Updated the backButton add-on with now options.
  • Updated the searchfield add-on with new options.
  • Removed the initPanels and initMenu options in favor of the hooks option.
  • Implemented a (sort of) B.E.M. structure for the CSS framework.
  • Added type option in the dividers add-on.
  • Improved matchMedia for responsive extensions and options.
  • Completely extracted the positioning extension out of the offCanvas add-on.
  • Option navbar.title can now be a function.
  • Removed dividers.collapse option in favor of using vertical submenus.
  • Removed the offCanvas.zposition: "next" option.
  • Moved divider and spacer css out of listview extension into core.
  • Split up SCSS variables and mixins per extension and addon.
  • Added SCSS variables to opt out of almost all CSS.
  • Styling inherits more from website styles.

This awesome jQuery plugin is developed by FrDH. For more Advanced Usages, please check the demo page or visit the official website.