Mmenu,menus,slippery submenus,jQuery plugin, 2 Mind-blowing topics on Mmenu – App look-alike menus with slippery submenus, Shopinson, Shopinson

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.

[maxbutton id=”2″ url=”https://mmenujs.com/” ]

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/

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*

shopinson-logo-32

©2020 Shopinson: complete guide to programming language

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

Log in with your credentials

or    

Forgot your details?

Create Account