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

File Size: 12.6KB
Views Total: 17489
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="">jQuery Script</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">jQuery UI</a></li>
<li><a href="">jQuery Mobile</a></li>

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

<script src=""></script>
<script type="text/javascript" src="jquery.fly_sidemenu.js"></script>

4. Initialize the plugin with options.

$(document).ready( function() {
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.

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