Android-Like jQuery Tab Navigation Plugin - ShiftyNav

ShiftyNav is a jQuery plugin inspired by the Android apps that make it easy to create tabbed navigation/slider with simple animation effects.

You might also like:

• Google Play Tabbed Navigation with jQuery and CSS3
• Flexible jQuery Tabbed Interface Plugin - SmartTab

How to use it:

1. Include jQuery library and ShiftyNav.js on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.shiftynav.js"></script>

2. Create html

<div id="nav">
<ul>
<li><a href="#text-1">Menu 1</a></li>
<li><a href="#text-2">Menu 2</a></li>
<li><a href="#text-3">Menu 3</a></li>
</ul>
<div>
<div id="text-1" class="text">
<h2>Text 1</h2>
<p>CONTENT 1</p>
</div>
<div id="text-2" class="text">
<h2>Text 2</h2>
<p>CONTENT 2</p>
</div>
<div id="text-3" class="text">
<h2>Text 3</h2>
<p>CONTENT 3</p>
</div>
</div>
</div>

3. Connect the plugin with options

$('div#nav').shiftynav({
    'active': 0,      // Active page on load
    'duration': 400,  // Duration of animations in milliseconds
    'scaling': 75     // Scaling percentage on fade out animations
});

Change log:

v1.1.0 (2014-06-16)

• Active li button has now class to indicate its active state

---

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