The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp is Mmenu.

Mmenu is an easy-to-use jQuery plugin for creating mobile app sliding navigation menu in your website.

The mmenu.js plugin core consists of the actual plugin (the onCanvas script) and essential add-ons. The onCanvas script is required for anything to work at all, the core add-ons are highly recommended for a stable, bugfree and accessible menu.

Mmenu - App look-alike menus with slippery submenus
Demos Files – Mmenu

The mmenu.js the core add-ons are highly recommended for a stable, bugfree and accessible menu.

View Demo

How to use Mmenu

  1. Include fontawesome Library on the web page
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="...path-to/dist/mmenu.css" />
  1. Include required CSS file to style your menus
		<style>
			.mm-menu {
				--mm-listitem-size: 50px;
				--mm-navbar-size: 50px;
			}

			@media (min-width: 992px) {
				.header a {
					display: none;
				}
			}

			.mm-navbar_tabs span {
				display: inline-block;
				margin-left: 8px;
			}
			@media (max-width: 450px) {
				.mm-navbar_tabs span {
					display: none;
				}
			}
		</style>
  1. Markup html structure
  <!-- IE 10 and 11 polyfills -->
  <script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=Array.prototype.filter%2CArray.prototype.forEach%2CArray.prototype.map%2CElement.prototype.cloneNode%2Cdocument.querySelector"></script>
</head>
<body>
  <div id="page">
    <div class="header">
      <a href="#menu"><span></span></a>
      Demo
    </div>
    <div class="content">
      <p><strong>This is an advanced demo.</strong><br />
        Click the menu icon to open the menu.</p>
    </div>
    <nav id="menu">
      <div id="panel-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="default.html">Default demo</a></li>
          <li><a href="onepage.html">One page demo</a></li>
        </ul>
      </div>

      <div id="panel-account">
        <ul>
          <li><a href="#/">My profile</a></li>
          <li><a href="#/">Privacy settings</a></li>
          <li><a href="#/">Activity</a></li>
          <li><a href="#/">Sign out</a></li>
        </ul>
      </div>

      <div id="panel-cart">
        <p style="text-align: center; padding-top: 30px;">Your shoppingcart is empty.<br />
          <a href="#/">Continue shopping.</a></p>
      </div>
    </nav>
  </div>
  1. Include the Mmenu jQuery and JQuery library
<!-- mmenu scripts -->
<script src="...path-to/dist/mmenu.js"></script>
<script src="...path-to/src/mmenu.debugger.js"></script>
  1. Call the plugin and you are done
  <script>
      new Mmenu(
        document.querySelector('#menu'),
        {
          extensions	: [ 'theme-dark', 'shadow-page' ],
          setSelected	: true,
          counters	: true,
          searchfield : {
            placeholder		: 'Search menu items'
          },
          iconbar		: {
            add 		: true,
            top 		: [
              '<a href="#/"><span class="fa fa-home"></span></a>'
            ],
            bottom 		: [
              '<a href="#/"><span class="fa fa-twitter"></span></a>',
              '<a href="#/"><span class="fa fa-facebook"></span></a>',
              '<a href="#/"><span class="fa fa-youtube"></span></a>'
            ]
          },
          sidebar		: {
            collapsed		: {
              use 			: '(min-width: 450px)',
              hideNavbar		: false
            },
            expanded		: {
              use 			: '(min-width: 992px)'
            }
          },
          navbars		: [
            {
              content		: [ 'searchfield' ]
            }, {
              type		: 'tabs',
              content		: [
                '<a href="#panel-menu"><i class="fa fa-bars"></i> <span>Menu</span></a>',
                '<a href="#panel-account"><i class="fa fa-user"></i> <span>Account</span></a>',
                '<a href="#panel-cart"><i class="fa fa-shopping-cart"></i> <span>Cart</span></a>'
              ]
            }, {
              content		: [ 'prev', 'breadcrumbs', 'close' ]
            }, {
              position	: 'bottom',
              content		: [ '<a href="http://mmenu.frebsite.nl/wordpress-plugin" target="_blank">WordPress plugin</a>' ]
            }
          ]
        }, {
          searchfield : {
            clear 		: true
          },
          navbars		: {
            breadcrumbs	: {
              removeFirst	: true
            }
          }
        }
      );

      document.addEventListener( 'click', ( evnt ) => {
        let anchor = evnt.target.closest( 'a[href^="#/"]' );
        if ( anchor ) {
          alert('Thank you for clicking, but that\'s a demo link.');
          evnt.preventDefault();
        }
      });
    </script>
  </body>
</html>

Source code [Full script]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="www.frebsite.nl" />
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />

    <title>mmenu.js demo</title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/demo.css" />
    <link rel="stylesheet" href="../dist/mmenu.css" />

    <style>
      .mm-menu {
        --mm-listitem-size: 50px;
        --mm-navbar-size: 50px;
      }

      @media (min-width: 992px) {
        .header a {
          display: none;
        }
      }

      .mm-navbar_tabs span {
        display: inline-block;
        margin-left: 8px;
      }
      @media (max-width: 450px) {
        .mm-navbar_tabs span {
          display: none;
        }
      }
    </style>

    <!-- IE 10 and 11 polyfills -->
    <script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=Array.prototype.filter%2CArray.prototype.forEach%2CArray.prototype.map%2CElement.prototype.cloneNode%2Cdocument.querySelector"></script>
  </head>
  <body>
    <div id="page">
      <div class="header">
        <a href="#menu"><span></span></a>
        Demo
      </div>
      <div class="content">
        <p><strong>This is an advanced demo.</strong><br />
          Click the menu icon to open the menu.</p>
      </div>
      <nav id="menu">
        <div id="panel-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="default.html">Default demo</a></li>
            <li><a href="onepage.html">One page demo</a></li>
          </ul>
        </div>

        <div id="panel-account">
          <ul>
            <li><a href="#/">My profile</a></li>
            <li><a href="#/">Privacy settings</a></li>
            <li><a href="#/">Activity</a></li>
            <li><a href="#/">Sign out</a></li>
          </ul>
        </div>

        <div id="panel-cart">
          <p style="text-align: center; padding-top: 30px;">Your shoppingcart is empty.<br />
            <a href="#/">Continue shopping.</a></p>
        </div>
      </nav>
    </div>

    <!-- mmenu scripts -->
    <script src="../dist/mmenu.js"></script>
    <script src="../src/mmenu.debugger.js"></script>
    <script>
      new Mmenu(
        document.querySelector('#menu'),
        {
          extensions	: [ 'theme-dark', 'shadow-page' ],
          setSelected	: true,
          counters	: true,
          searchfield : {
            placeholder		: 'Search menu items'
          },
          iconbar		: {
            add 		: true,
            top 		: [
              '<a href="#/"><span class="fa fa-home"></span></a>'
            ],
            bottom 		: [
              '<a href="#/"><span class="fa fa-twitter"></span></a>',
              '<a href="#/"><span class="fa fa-facebook"></span></a>',
              '<a href="#/"><span class="fa fa-youtube"></span></a>'
            ]
          },
          sidebar		: {
            collapsed		: {
              use 			: '(min-width: 450px)',
              hideNavbar		: false
            },
            expanded		: {
              use 			: '(min-width: 992px)'
            }
          },
          navbars		: [
            {
              content		: [ 'searchfield' ]
            }, {
              type		: 'tabs',
              content		: [
                '<a href="#panel-menu"><i class="fa fa-bars"></i> <span>Menu</span></a>',
                '<a href="#panel-account"><i class="fa fa-user"></i> <span>Account</span></a>',
                '<a href="#panel-cart"><i class="fa fa-shopping-cart"></i> <span>Cart</span></a>'
              ]
            }, {
              content		: [ 'prev', 'breadcrumbs', 'close' ]
            }, {
              position	: 'bottom',
              content		: [ '<a href="http://mmenu.frebsite.nl/wordpress-plugin" target="_blank">WordPress plugin</a>' ]
            }
          ]
        }, {
          searchfield : {
            clear 		: true
          },
          navbars		: {
            breadcrumbs	: {
              removeFirst	: true
            }
          }
        }
      );

      document.addEventListener( 'click', ( evnt ) => {
        let anchor = evnt.target.closest( 'a[href^="#/"]' );
        if ( anchor ) {
          alert('Thank you for clicking, but that\'s a demo link.');
          evnt.preventDefault();
        }
      });
    </script>
  </body>
</html>

Official Owner website: https://mmenujs.com/

LEAVE A REPLY

Please enter your comment!
Please enter your name here