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.

Download

View source on GitHub

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;
}