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

Free Download Slick and App-Like Sliding Menu Plugin With jQuery – Mmenu

By Posted on

This time I will share jQuery Plugin and tutorial about Slick and App-Like Sliding Menu Plugin With jQuery – Mmenu, hope it will help you in programming stack.

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

Demo Download

Mmenu is a simple yet robust JavaScript/jQuery plugin for creating responsive, accessible, modular, flexible, mobile-friendly, 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.

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.

View more:

Installation:

view source
1 # NPM
2 $ npm install jquery.mmenu
3  
4 # Bower
5 $ bower install jquery.mmenu

How to use it:

1. Include Mmenu plugin’s JavaScript on the web page.

view source
1 <!-- v8 Vanilla JS Version -->
2 <!-- polyfills are needed for Internet Explorer 10 and 11 -->
3 <script src="mmenu.js"></script>
4 <script src="mmenu.polyfills.js"></script>
5 <!-- v7 jQuery Version -->
6 <script src="jquery.min.js"></script>
7 <script src="jquery.mmenu.js"></script>

2. Include the required CSS file on the page.

view source
1 <!-- v8 Vanilla JS Version -->
2 <link rel="stylesheet" href="mmenu.css" />
3 <!-- v7 jQuery Version -->
4 <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’.
view source
01 // v8 Vanilla JS Version
02 document.addEventListener(
03   "DOMContentLoaded", () => {
04     new Mmenu( "nav#menu",{
05         extensions: ["border-full"]
06     });
07   }
08 );
09  
10 // v7 jQuery Version
11 $(function() {
12   $('nav#menu').mmenu({
13     extensions: ["border-full"]
14   });
15 });

4. Create a nav list for the mmenu. The plugin supports multi-level navigation menus using nested HTML lists.

view source
01 <nav id="menu">
02   <ul>
03     <li><a href="#">Home</a></li>
04     <li><span>About us</span>
05       <ul>
06         <li><a href="#">History</a></li>
07         <li><span>The team</span>
08           <ul>
09             <li><a href="#">Management</a></li>
10             <li><a href="#">Sales</a></li>
11             <li><a href="#">Development</a></li>
12           </ul>
13         </li>
14         <li><a href="#">Our address</a></li>
15       </ul>
16     </li>
17     <li><a href="#">Contact</a></li>
18     <li class="Divider">Other demos</li>
19     <li><a href="#">Advanced demo</a></li>
20   </ul>
21 </nav>

5. Create a hamburger button to toggle the mmenu.

view source
1 <a href="#menu"><span></span></a>

6. Attach the plugin to the nav list to intialize the mmenu.

view source
01 // v8 Vanilla JS Version
02 document.addEventListener(
03   "DOMContentLoaded", () => {
04     new Mmenu( "nav#menu" );
05   }
06 );
07  
08 // v7 jQuery Version
09 $(function() {
10   $('nav#menu').mmenu();
11 });

7. Default options to customize the menu.

view source
01 new Mmenu( "nav#menu",{
02  
03       // A collection of extension names to enable for the menu.
04       extensions: [],
05  
06       // navbar options
07       navbar: {
08         add: true,
09         sticky: true,
10         title: "<a href="https://www.jqueryscript.net/menu/">Menu</a>",
11         titleLink: "parent"
12       },

Related posts: