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

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

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.

The plugin also comes with a Light (compact) version, you can view the mmenu-light plugin here.

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:

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.