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.
mobile-apps-like-sliding-menu

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.



Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.