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.

<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />

<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

CSS

Add CSS on page for styling your sliding menu.

JS

Finally Call the plugin function on page and all done.

<script>
			$(function() {
				$('nav#menu').mmenu();
			});
		script>

See live demo and download source code.

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		: [ 'WordPress plugin' ]
						}
					]
				}, {
					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.

Related