Author: | FrDH |
---|---|
Views Total: | 794 views |
Official Page: | Go to website |
Last Update: | November 24, 2022 |
License: | CC-BY-4.0 |
Preview:

Description:
mmenu-light is a light version of the mmenu plugin that makes it easier to create off-canvas hamburger navigation just like the native mobile app.
No dependencies, no extensions, no addons. Easy to implement a pretty clean and mobile-friendly navigation system in your web app just in a minute.
How to use it:
Import the stylesheet mmenu-light.css
and JavaScript mmenu-light.js
into the HTML.
<link rel="stylesheet" href="./dist/mmenu-light.css" /> <script src="./dist/mmenu-light.js"></script>
Create an anchor link for the hamburger toggle button.
<a href="#menu"><span></span></a>
Create a multi-level off-canvas menu from nested HTML lists.
<nav id="menu"> <ul> <li class="Selected"><a href="#">Home</a></li> <li><span>About us</span> <ul> <li><a href="#about/history">History</a></li> <li><span>The team</span> <ul> <li><a href="#about/team/management">Management</a></li> <li><a href="#about/team/sales">Sales</a></li> <li><a href="#about/team/development">Development</a></li> </ul> </li> <li><a href="#about/address">Our address</a></li> </ul> </li> <li><a href="#contact">Contact</a></li> </ul> </nav>
Initialize the off-canvas navigation. Possible options:
- element: target element.
- mediaQuery: media queries to enable the navigation. Default: all.
const menu = new MmenuLight( document.querySelector( '#menu' ), 'all');
Create a fixed navigation bar. Possible options:
- selectedClass: CSS class of selected item
- slidingSubmenus: use sliding submenus
- theme: ‘dark’ or ‘light’
- title: menu title
var navigator = menu.navigation({ // selectedClass: 'Selected', // slidingSubmenus: true, // theme: 'dark', // title: 'Menu' });
Activate the off-canvas navigation. Possible options:
- position: ‘left’ or ‘right’
var drawer = menu.offcanvas({ // position: 'left' });
Enable the hamburger button to toggle the off-canvas navigation.
document.querySelector( 'a[href="#menu"]' ) .addEventListener( 'click', evnt => { evnt.preventDefault(); drawer.open(); });
Open a panel in the navigation.
navigator.openPanel( menu.querySelector( "ul" ); );
Open/close the navigation.
drawer.open(); drawer.close();
Changelog:
v3.2.1 (11/13/2022)
- Updates
v3.2.0 (09/12/2022)
- Updates
v3.1.1 (03/03/2022)
- CSS fix
v3.1.0 (02/05/2022)
- removed IE11 support
v3.0.9 (06/21/2021)
- updates
v3.0.8 (01/17/2021)
- updates
v3.0.7 (07/20/2020)
- updates
v3.0.5 (06/25/2020)
- prevent default in passive listener fix
v3.0.4 (06/13/2020)
- passive event listener
v3.0.3 (03/17/2020)
- vertical submenus fix
v3.0.2 (01/12/2020)
- reinstated the esm files
v3.0.1 (12/25/2019)
- Rewrote the plugin.
- Split up functionality into off-canvas and navigate add-ons.
- Removed events in favor of mutation observer.
v2.3.1 (09/15/2019)
- Fixed for IE11.
v2.3.0 (09/14/2019)
- vertical submenus + IE11 support
Thanks!
“1:2107 error Parsing error: Unexpected token =” Error when deploy to firestore
Very useful, and works well. it was a bit confusing at first but finally installed perfectly. thank you.
How am I gonna set the anchor link/ hamburger Icon as it will close the off-canvas menu . After opening the off-canvas menu I can’t close it with the anchor tag that I just clicked to open that off-canvas menu. But I have to close it clicking anywhere outside of that off-canvas menu content