jQuery Mobile Navigation Menu Plugin For Responsive Design - navobile

navobile is a jQuery plugin that make it easy to create an user-friendly and mobile-friendly navigation menu for responsive website design. The plugin will detect the size of user's window and automatically turns the default navigation menu bar into a clickable and expandable menu bar. I highly recommend you opening the demo page and then resizing your window to see how it works.

How to use it:

1. Include jQuery library and jQuery Navobile Plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="src/jquery.navobile.css" rel="stylesheet" type="text/css">
<script src="src/jquery.navobile.min.js"></script>

2. Include required modernizer.js script to detect HTML5 and CSS3 features in the user's browser.

<script src="lib/modernizer.min.js"></script>

3. Include Hammer JS and its plugin for multi-touch gestures

<script src="lib/hammer.min.js"></script>
<script src="lib/jquery.hammer.min.js"></script>

4. The html

<div class="mobile-header-bar mobile-only" style="position:relative;">
<a href="#" id="show-navobile" class="icon">=</a>
</div>

<nav id="navigation">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>

5. Call the plugin with options

$(function() {
$("#navigation").navobile({

//  the element that will open the navigation on click 
cta: '#show-navigation', 

// the selector that wraps the content that will slide out
content: '#content', 

// ltr or rtl
direction: 'ltr',

// jQuery easing function to use in $.animate fallback
easing: 'linear', 

// whether the plugin needs to move the navigation in the DOM structure
changeDOM: false,

// whether to or not to copy across any bound events 
copyBoundEvents: false, 

// whether to open/close nav using swipe.
bindSwipe: false, 

// whether to open/close nav using drag.
bindDrag: false, 

// the percentage you want navobile to open (default: '80%') N.B.
openOffsetLeft: '80%', 

hammerOptions: {}
});
});

Change logs:

2015-11-25

• Fixed issue were menu always opened from right

v0.3.1 (2014-12-27)

• Add direction option

v0.2.6 (2014-07-04)

• new param, copyBoundEvents

v0.2.5 (2014-07-03)

• Added Open, Close, Opened and Closed events.

v0.2.4 (2014-05-07)

• update.

---

This awesome jQuery plugin is developed by madetech. For more Advanced Usages, please check the demo page or visit the official website.