 |
| Menu Sliding Slick and App jQuery Plugin |
Mmenu is a simple but powerful JavaScript/jQuery plugin to build responsive, accessible, modular, flexible, mobile-friendly and app-like sliding menu slick for your mobile website all with an unlimited number 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.
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
});
)
});
Live Demo
See the Pen Sliding Menu Slick and App Like jQuery Plugin - Mmenu.JS by Plugin JS (@pluginjs) on CodePen.
File Info
- File Name :
- mmenu-js-master.zip
- Size :
- 219.79KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT