menuFlip - jQuery Plugin for Flipping Navigation
menuFlip is a jQuery plugin for adding a flipping, marquee type effect to text based navigational menu items when hovered over without needing to use background images, which can be a pain.
Menu Example
HTML
All you need is this simple markup.
<ul id="flip_nav">
<li><a href="/home">Home</a></li>
<li><a href="/web">Web</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
You can optionally specify the text you want to use for the flipped menu item using the data-flipped-text
attribute in each link:
<li><a href="/home" data-flipped-text="Flipped Text">Home</a></li>
Calling the Plugin
$('#flip_nav).menuFlip({
li_height : '20px',
flip_speed : 150,
flipped_class : 'flipped_item',
mouseover : function() {},
mouseout : function() {}
});
CSS
No extra CSS is required for this plugin to function, but you'll probably want to define a width for the ul
or float the li
elements to the left so they are inline. Also, the flipped items have a class of flipped_item
so you can style that puppy as you like. Here's an example of the CSS for the above example:
ul#flip_nav li {
float:left;
text-align:center;
margin:0px 10px 0px 0px;
}
/*this defines the styling of the new flipped menu item*/
ul#flip_nav a.flipped_item {
background-color:#000000;
color: #ffffff;
}