jQuery Plugin For Simple Flipping Menus - menuFlip

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.