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

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

See also:

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

Related plugins:

Installation:

# NPM
$ 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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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>
</div>
<nav id="menu">
<ul>
<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>
</ul>
</nav>
</div>

4. Call the plugin and done.

$(function() {
$('nav#menu').mmenu({
  // 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

Change logs:

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.