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

Slick and App-Like Sliding Menu Plugin With jQuery - Mmenu
File Size: 236 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.

Related plugins:

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

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

5. Default options.

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

6. Configuration.

// CSS classesclassNames: {
  panel   : 'Panel',
  vertical  : 'Vertical',
  selected  : 'Selected',
  divider   : 'Divider',
  spacer    : 'Spacer'

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

Change logs:

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.