jQuery Plugin For Simple Flipping Menus - menuFlip
File Size: | 2.95 KB |
---|---|
Views Total: | 2154 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
menuFlip is a fast and simple jQuery plugin that allows you to create flipping navigation menus. The flipped links have a class of ‘flipped_item’ by default so can style as you like.
Basic Usage:
1. Include jQuery library and menuFlip plugin on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.menuFlip.js"></script>
2. Create a html list
<ul id="menuFlip"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul>
3. The CSS
ul#menuFlip li { float:left; text-align:center; margin:0px 10px 0px 0px; } /*this defines the styling of the new flipped menu item*/ ul#menuFlip a.flipped_item { background-color:#000000; color: #ffffff; }
4. Call the plugin with options
$('#menuFlip').menuFlip({ li_height : '20px', flip_speed : 150, flipped_class : 'flipped_item', mouseover : function () {}, mouseout : function () {} });
Change logs:
v1.3.0 (2014-12-16)
- add ability to change flipped text
v1.2.0 (2013-11-21)
- add mouseover & mouseout callbacks
v1.0.0 (2013-08-04)
- Quick tab fix
This awesome jQuery plugin is developed by grimmdude. For more Advanced Usages, please check the demo page or visit the official website.