Airbnb iOS 7 App Style Side Menu with jQuery and CSS3 - Fly Side Menu

Fly Side Menu is a cool menu plugin that makes use of CSS3 to create a side menu navigation with 3D transforms and transitions, similar to the new Airbnb App navigation resigned for iOS 7.

Basic Usage:

1. Include jQuery fly side menu's CSS stylesheet in the head section of your page.

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

2. Create the navigation menu using html <ul> and <li> tags.

<ul class="sidemenu">
<li><a href="https://www.jqueryscript.net">jQuery Script</a></li>
<li><a href="http://www.jquery.com">jQuery</a></li>
<li><a href="http://www.jqueryui.com">jQuery UI</a></li>
<li><a href="http://www.jquerymobile.com">jQuery Mobile</a></li>
...
</ul>

3. Include the jQuery library and jQuery Fly Side Menu plugin at the end of the page.

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

4. Initialize the plugin with options.

<script>
$(document).ready( function() {
$(".sidemenu").fly_sidemenu({
btnContent: "=", // This option let you define what appears inside the side menu button. You can add your custom icon here. This option accepts all HTML tags. The default value is "=" string.
position: "left", // This option will let you define where the sidebar will appear on the page. Available options are "top", "left", "right", "bottom". The default value is "left"
customSelector: "li", // In case you do not want to use lists, simply define your own css selector here. The default value is "li".
hideButton: false // You can disable the auto creation of toggle button by changing this to true. The default value is false.
});
});
</script>

---

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