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

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

Mmenu is a super simple jQuery plugin for creating slick 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.

See also:

  • jQuery mhead: a beautiful mobile navigation header to accompany the jQuery.mmenu navigation menu on your website and webapp.

View more:

Alternative plugins:


$ npm install jquery.mmenu

# Bower
$ bower install jquery.mmenu

How to use it:

1. Include jQuery library and jQuery Mmenu on the web page

<script src=""></script>
<script type="text/javascript" src="jquery.mmenu.js"></script>

2. Include required CSS file to style your menus

<link type="text/css" rel="stylesheet" href="../../mmenu.css" />

3. Markup html structure

<div id="page">
<div id="header"> <a href="#menu"></a> Tutorial </div>
<div id="content">
<h4>How to create a mmenu</h4>
<p>This tutorial shows how to use the jQuery.mmenu-plugin.</p>
<p><a href="page.html">Get started &raquo;</a></p>
<nav id="menu">
<li><a href="page.html">The page</a></li>
<li><a href="mainmenu.html">The mainmenu</a></li>
<li><a href="submenus.html">Submenus</a></li>
<li><a href="labels.html">Labels</a></li>
<li><a href="counters.html">Counters</a></li>
<li><a href="selected.html">Selected item</a></li>
<li><a href="openmenu.html">Open the menu</a></li>
<li><a href="closemenu.html">Close the menu</a></li>

4. Call the plugin and done.

$(function() {
  // options
}, {
  // configuration

5. Default options to customize the menu.

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

onClick     : {
  // the clicked link should be visibly "selected".
  setSelected   : true

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

// navbar options
navbar: {
  add: true,
  title: "Menu",
  titleLink: "parent"

// callback functions
initMenu: function() {},
initPanels: function() {},

6. Configuration.

// CSS classes
classNames: {
  divider: "Divider",
  inset: "Inset",
  nolistview: "NoListview",
  nopanel: "NoPanel",
  panel: "Panel",
  selected: "Selected",
  spacer: "Spacer",
  vertical: "Vertical"

// Whether or not the menu should be cloned 
// (and the original menu kept intact).
clone: false,

// 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


v8.2.3 (2019-08-12)

  • bugfix vertical submenus

v8.2.2 (2019-07-19)

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.

v6.1.8 (2017-10-03)

  • sticky elements offset config

v6.1.7 (2017-09-16)

  • bugfix searchfield add-on

v6.1.5 (2017-08-10)

  • bugfix sticky elements

v6.1 (2017-05-19)

  • Using Typescript.
  • Using gulp-sass instead of gulp-ruby-sass.
  • Removed "toggles" and "checks" from search results in resultsPanel.
  • Bugfix lazySubmenus add-on with selected item.
  • Bugfix autoHeight add-on with vertical submenus.
  • Bugfix in the screenReader add-on.
  • Optionally UMD custom build.

v6.0.1 (2017-03-25)

  • Added responsive option for extensions.
  • Added pageScroll add-on.
  • Plugin is now translatable.
  • Added translations for Dutch and German.
  • Easy custom builds with Gulp.
  • Added screenReader add-on to the core and turned on by default.
  • Added "nolistview" and "nopanel" to classNames configuration option.
  • Changed file structure for the core JS and CSS.
  • Enabled opting out parts of CSS.
  • Added listview extension.
  • Refactored justifiedListview extension in the listview extension.
  • Made the UMD file the default.
  • Improved the navbars add-on.
  • Improved the keyboardNavigation add-on.
  • Improved the screenReader add-on.
  • Added and renamed a lot of API methods and hooks.
  • Removed the update method from the API.
  • Changed update option to count for the counters add-on.
  • Removed "panel" value for the navbar.titleLink option.
  • Added "fx-panels-slide-up" and "fx-panels-none" to the effects extionsion.
  • Added $mm_pagedimOpacity SCSS variable for the pageDim extension.
  • Renamed effects in the effects extension.
  • CSS changes.
  • Updated the turbolinks framework wrapper.
  • offCanvas.menuInjectMethod is no longer restricted to "append" or "prepend".
  • Replaced the offCanvas.menuInjectMethod configuration option with offCanvas.menuInsertMethod.
  • Replaced the offCanvas.menuWrapperSelector configuration option with offCanvas.menuInsertSelector.
  • Added fixedElements.elemInsertMethod and fixedElements.elemInsertSelector configuration options.
  • A lot of refactoring.

v5.7.8 (2016-11-13)

  • Added RTL add-on.
  • Added keyboardNavigation add-on.
  • Added lazySubmenus add-on.
  • Added Bootstrap framework wrapper.
  • Added initMenu and initPanels options.
  • Renamed init API method to initPanels.
  • Integrated the leftSubpanels extension into the RTL add-on.
  • Integrated the currentItem add-on into the setSelected add-on.
  • Combined the dragOpen and dragClose add-ons into the drag add-on.
  • Combined the pageshadow and panelshadow extensions into the shadows extension.
  • Removed hideNavbars option for the columns add-on.
  • Removed hideNavbars option for the iconPanels add-on.
  • Added scss color for navbars.
  • Improved WordPress framework wrapper.
  • Improved support for IE9.
  • Minor update

v5.6 (2016-01-16)

  • Changed license to CC-BY-NC-4.0-
  • Added popup extension.
  • Added columns add-on.
  • Added dropdown add-on.
  • Added screenReader add-on.
  • Added setSelected add-on.
  • Added AngularJS framework wrapper.
  • Added Magento framework wrapper.
  • Added "highest" as a value for the autoHeight.height option.
  • Added searchfield.resultsPanel option.
  • Searchfield searches the data-mm-searchtext attribute first.
  • Added configuration options for the searchfield addon.
  • Added openingPanel, openedPanel, closingPanel and closedPanel callback methods to the API.
  • Menu opens if menu ID in URL hash.
  • Improved the debugger.
  • Switched to Gulp as task runner.
  • Set the UMD file as the main file in bower.json en package.json
  • Optimized css vendor prefixes with Gulp Autoprefixer.
  • Changed file structure and directory names.
  • Fixed issues and bugs.

v5.5.3 (2015-11-03)

  • Replaced option offCanvas.modal with offCanvas.blockUI.
  • Removed option onClick.blockUI.
  • Added pageDim extension.
  • Added style "border-offset" to the borderStyle extension.
  • Added effects "listitems-fade" and "listitems-drop: to the effects extension.
  • Changed names for the effects extension.

v5.5.2 (2015-10-02)

  • Replaced option offCanvas.modal with offCanvas.blockUI.
  • Removed option onClick.blockUI.
  • Added pageDim extension.
  • Added style "border-offset" to the borderStyle extension.
  • Added effects "listitems-fade" and "listitems-drop: to the effects extension.
  • Changed names for the effects extension.
  • fixed searchfield issue

v5.4.2 (2015-09-18)

  • Added jQuery Mobile framework wrapper.
  • Added Olark framework wrapper.
  • Added Turbolinks framework wrapper.
  • Added WordPress framework wrapper.
  • Changed HTML markup for panels.
  • Added offCanvas.noPageSelector configuration option.
  • Rearranged file structure.
  • Small bugfixes and changes.

v5.3.4 (2015-07-28)

  • IE9 support + small styling fixes + third party extensions

v5.3.3 (2015-07-16)

  • navbars bugfix

v5.3.2 (2015-07-09)

  • icon panels fix + small imporvements

v5.3.1 (2015-06-26)

  • breadcrumbs + bugfix

v5.3.0 (2015-06-17)

  • update.

v5.2.0 (2015-05-12)

  • Integrated the searchfield add-on in the navbars add-on

v5.1.2 (2015-05-05)

  • improved custom content navbar

v5.1.1 (2015-05-02)

  • update.

v5.1 (2015-04-30)

  • update.

v5.0.4 (2015-04-06)

  • fixed issue with header

v5.0.3 (2015-03-29)

  • fixed styling issue vertical submenus

v5.0.2 (2015-03-23)

  • bugfix offcanvas add-on

v5.0.0 (2015-03-22)

  • Standardized HTML markup for panels and listviews.
  • Changes in styling, colors and sizes.
  • Moved custom event to API methods.
  • Added closeAllPanels API method.
  • Added pageShadow extension.
  • Added multiline extension.
  • Added borderStyle extension.
  • Added sectionIndexer add-on.
  • Added backButton add-on.
  • Replaced labels add-on with dividers add-on.
  • Added add, addTo and fixed options for the dividers add-on.
  • Added titleLink option for the header add-on.
  • Changed showLinksOnly option to showTextItems for the searchfield add-on.
  • Added showSubPanels option for the searchfield add-on.
  • Made vertical submenus possible per panel.
  • Changed classname "mm-label" and "Label" to "mm-divider" and "Divider".
  • Changed classname "mm-list" to "mm-listview".
  • Replaced "classes" option with "extensions" array.
  • iconbar and widescreen extensions require to be added to the "extensions" option.
  • Merged styling and functionality from the header add-on into default subtitle.
  • Removed mm_colors_header SCSS mixin.
  • Added ontouchmove on overlay to close menu.
  • data-target Is added to anchors for bootstrap support.
  • Extended add-on structure.
  • Moved minified .js and generated .css files to the "dist" folder.
  • Added support for turbolinks.
  • Bugfix searchfield in DIV panel.
  • Extended event namespaces with add-on name.


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