jQuery Plugins › jQuery Menu Plugins › jQuery Mmenu

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

File Size:	207 KB
Views Total:	156054
Last Update:	01/07/2023 04:16:00 UTC
Publish Date:	05/23/2013 04:57:43 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Important Note:

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

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

View more:

Top 50 Off-canvas Navigation jQuery Plugins

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:

v9.3.0 (2023-01-07)

updated package

v9.2.3 (2022-12-24)

backbutton fix

v9.2.2 (2022-11-21)

Added Ukrain translations

v9.2.1 (2022-11-14)

Update

v9.2.0 (2022-08-19)

Started using the inert attribute for better accessibility (and less logic to achieve the same result).
Removed option sidebar.collapsed.blockMenu in favor of using the inert attribute.
Removed option iconpanels.blockPanel in favor of using the inert attribute.
Moved theme logic from off-canvas add-on to its own add-on.
Added searchfield.search option.
Added theme method to the API.
Fixed a bug with opening vertical submenus.
Fixed a bug with counting listitems in a vertical submenus.
Fixed a bug with multiple menus on different positions.

v9.1.6 (2022-04-06)

scroll fix

v9.1.5 (2022-04-05)

search fix

v9.1.2/3/4 (2022-04-03)

focus fix, shorter scoped variables

v9.1.1 (2022-03-24)

Bugfix

v9.1.0 (2022-03-05)

Moved the positioning extension to the offCanvas.position option.
Moved the themes extension to the theme option.
Removed the fullscreen extension.
Added a high-contrast versions for each theme.

v9.0.4 (2022-02-01)

offcanvas fix

v9.0.3 (2022-01-28)

fixed a bug with creating unique id's for cloned menus

v9.0.0/1 (2021-11-25)

Improved keyboard navigation, also no longer a separate add-on.
Improved screenreader support, also no longer a separate add-on.
Improved logic for opening and closing a panel.
Opening and closing the menu and panels now works without a timeout.
Dropped support for IE11.
Improved CSS for modern browsers.
Updated Typescript and SASS.
Switched B.E.M. notation for modifiers.
Removed the jQuery plugin.
Small improvements and bugfixes.
Removed the navbar.sticky option, navbars are now sticky by default.
Removed the initListview, initPanel and closeAllPanels methods from the API.
The :before API hooks are now only invoked if the method actually will do something.
Removed the openPanel:start, openPanel:finish, open:start, open:finish, close:start, close:finish, initAnchors:before and initAnchors:after hooks from the API.
Removed most SCSS variables in favor of CSS variables. Remaining SCSS variables are removed from the docs.
Removed the -—mm-offse-top, -—mm-offse-left, -—mm-offse-right and -—mm-offse-bottom CSS variables.
Improved the searchfield add-on.
Moved the dividers, keyboardNavigation and toggles add-ons into the core.
Removed the moveBackground and blockUi options from the offcanvas add-on.
The extended.initial option for the sidebar add-on no longer supports the value "remember".
Removed the autoheight, columns, dividers, drag, dropdown, fixedelements and lazysubmenus add-ons for being either outdated, out of scope or too incompatible.
Removed the borderstyle, effects, listview, multiline, pagedim, popup and shadows extensions for being either outdated, out of scope or easy to reproduce using custom CSS.
Removed all wrappers.

v8.5.24 (2021-06-22)

Bugfix

v8.5.23 (2021-05-07)

fix accessibility issue

v8.5.22 (2021-03-22)

update

v8.5.21 (2021-01-18)

update

v8.5.20 (2020-11-15)

update

v8.5.19 (2020-10-16)

update

v8.5.18 (2020-10-04)

fixed missing polyfills

v8.5.17 (2020-09-22)

fixed scroll bug

v8.5.16 (2020-09-02)

updated

v8.5.15 (2020-08-20)

bugfixed

v8.5.14 (2020-07-10)

bugfixed

v8.5.12 (2020-06-01)

fixed missing polyfills

v8.5.11 (2020-05-25)

bugfix

v8.5.10 (2020-05-20)

iconbar fix

v8.5.9 (2020-05-14)

updated

v8.5.8 (2020-05-13)

scrollbugfix for vertical submenus

v8.5.5 (2020-04-26)

iconbar + scrollbugfix improvements

v8.5.4 (2020-04-17)

lazysubmenus fix

v8.5.3 (2020-03-22)

Fixed searchfield

v8.5.2 (2020-03-17)

Removed tileview legacy code

v8.5.1 (2020-03-12)

Removed tileview legacy code

v8.5.0 (2020-02-28)

Removed Tileview extension.
Removed next content for the navbar add-on.
Fixed bug in the title content for the navbar add-on.
Small improvements and bugfixes.

v8.4.7 (2020-02-13)

Fixed polyfills.

v8.4.6 (2020-01-08)

Fixed for IE 10/11.

v8.4.5 (2019-12-30)

drag add-on bugfix

v8.4.4 (2019-12-22)

fix undefined panel

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.

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

Important Note:

View more:

See also:

Installation:

How to use it:

Alternative plugins:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review