Create Mobile Apps Like Sliding Menu Using Jquery Mmenu Plugin
In this post I am ging to introduce a cool plugin to Create Mobile Apps Like Sliding Menu Using Jquery Mmenu Plugin.The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customizable through a wide range of options, extensions and add-ons and it will always fit your needs.It supports vertical or horizontal sliding submenus and fixed header. Licensed under the CC-BY-NC-4.0 license.
Create Mobile Apps Like Sliding Menu Using Jquery Mmenu Plugin
In this example i have created a basic example of Mobile Apps Like Sliding Menu Using Jquery Mmenu Plugin you can customise below example as per your need.
Libraries
Include Mmenu Plugin JS+CSS libraries on page.
<!--CSS--> <link type="text/css" rel="stylesheet" href="jquery.mmenu.css" /> <!--JS--> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.mmenu.js"></script> |
HTML
Markup html for your app-like menu
<div id="page"> <div class="header"> <a href="#menu"><span></span></a> Demo </div> <div class="content"> <p><strong>This is a demo.</strong><br /> Click the menu icon to open the menu.</p> </div> <nav id="menu"> <ul> <li><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> </div> |
CSS
Add CSS on page for styling your sliding menu.
<style> html, body { padding: 0; margin: 0; } body { background-color: #fff; font-family: Arial, Helvetica, Verdana; font-size: 14px; line-height: 22px; color: #666; position: relative; -webkit-text-size-adjust: none; } body * { text-shadow: none; } h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: bold; margin: 20px 0 10px 0; } h1, h2, h3 { font-size: 18px; } h4, h5, h6 { font-size: 16px; } p { margin: 0 0 10px 0; } a, a:link, a:active, a:visited, a:hover { color: inherit; text-decoration: underline; } nav:not(.mm-menu) { display: none; } .header, .content, .footer { text-align: center; } .header, .footer { background: #777; font-size: 16px; font-weight: bold; color: #fff; line-height: 40px; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 40px; padding: 0 50px; } .header.fixed { position: fixed; top: 0; left: 0; } .footer.fixed { position: fixed; bottom: 0; left: 0; } .header a { display: block; width: 28px; height: 18px; padding: 11px; position: absolute; top: 0; left: 0; } .header a:before, .header a:after { content: ''; display: block; background: #fff; height: 2px; } .header a span { background: #fff; display: block; height: 2px; margin: 6px 0; } .content { padding: 150px 50px 50px 50px; } </style> |
JS
Finally Call the plugin function on page and all done.
<script> $(function() { $('nav#menu').mmenu(); }); </script> |
See live demo and download source code.
DEMO | DOWNLOAD
These are lot’s of more option available for customising your menu by following options.
<script type="text/javascript"> $(function() { $('nav#menu').mmenu({ extensions : [ 'fx-menu-slide', 'shadow-page', 'shadow-panels', 'listview-large', 'pagedim-white' ], iconPanels : true, counters : true, keyboardNavigation : { enable : true, enhance : true }, searchfield : { placeholder : 'Search menu items' }, navbar : { title : 'Advanced menu' }, navbars : [ { position : 'top', content : [ 'searchfield' ] }, { position : 'top', content : [ 'breadcrumbs', 'close' ] }, { position : 'bottom', content : [ '<a href="http://mmenu.frebsite.nl/wordpress-plugin" target="_blank">WordPress plugin</a>' ] } ] }, { searchfield : { clear : true } }); }); </script> |
See official github repository for more information and follow for future updates.Don’t forget to read license for using above plugin in your commercial project.