App Style Fly-out Navigation Menu Plugin For jQuery - iosmenu

iosmenu is a jQuery plugin for quickly creating a mobile App-style sidebar toggle, push, overlaying navigation menu into your web page. Once you click the toggle button, the menu will slide out from the left/right side of the page and generate an overlay covering the main content to highlight your navigation.

Basic Usage:

1. Include the jQuery javascript library and the jQuery iosmenu plugin in the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src = "jquery.iosmenu.js"></script>

2. Create a toggle button for the navigation menu.

<div class="button"></div>

3. Create the menu items for your navigation.

<div class="menu">
<h2>My navigation menu</h2>
<ul>
<li>Menu item #1</li>
<li>Menu item #2</li>
<li>Menu item #3</li>
<li>Menu item #4</li>
<li>Menu item #5</li>
<li>Menu item #6</li>
</ul>
</div>

4. Style the navigation menu through CSS.

.button {
position: absolute;
top: 0;
left: 0;
width: 49px;
height: 49px;
background: #aaa url(menu-icon.png) no-repeat 50% 50%;
}
.menu {
background: #333;
box-shadow: 0 0px 10px #000;
width: 40%;
max-width: 400px;
min-width: 200px;
}
.menu h2 {
margin: 15px;
font-size: 200%;
}
.menu ul {
margin: 15px 0;
font-size: 120%;
border-top: 1px solid #000;
border-bottom: 1px solid #666;
}
.menu ul li {
padding: 0 15px;
border-top: 1px solid #666;
border-bottom: 1px solid #000;
line-height: 40px;
display: block;
color: #fff;
}

5. Call the plugin with options.

<script type='text/javascript'>
$(document).ready(function() {

$('.menu').iosMenu({
menu_location: 'left'
});

$('.button').bind('click', function() {

$('.menu').iosMenu('toggle');

});

});
</script>

6. Default settings and callbacks.

obj: '',
bg_obj: '',
menu_number: 0,
resp: {
menu_w: 0,
menu_outer_w: 0,
menu_h: 0,
offset_left_op: 0,
offset_left_cl: 0,
offset_left_mi: 0,
pull_threshold_px: 0,
pull_threshold: 0
},
touch: {
pull_threshold_perc: 0.1,
pull_threshold_max_px: 50,
pull_threshold_min_px: 20,
snap_threshold: 2,
start_threshold: 0,
v_pull_threshold: 3,
h_pull_threshold: 3
},
anim: {
fps: 60000,
duration: 750,
menu_timeouts: new Array()
},
state: {
open: true,
flags: {
pull_threshold: false,
event_start: false,
mouse_down: false
},
callback_fired: {
start: false,
middle_open: false,
middle_close: true,
complete: false
}
},
body_css: {
position: 'relative'
},
menu_css: {
position: 'fixed',
top: 0,
left: 0,
bottom: 0,
overflow: 'auto',
zIndex: 1000,
display: 'block',
opacity: 1
},
bg_css: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: '#000',
opacity: 0.75,
zIndex: 999
},
menu_location: 'right',
parallax_ratio: 1,
menu_toggle_button_selector: '',
move_with_menu_selector: '',
on_loaded: '',
on_resize: '',
on_update: '',
on_start: '',
on_middle: '',
on_complete: '',
on_step: ''

Change log:

v0.5.2 (2014-05-14)

• update.

---

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