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.


View source on GitHub

Menu Example


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>

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

    li_height       : '20px', 
    flip_speed      : 150, 
    flipped_class   : 'flipped_item', 
    mouseover       : function() {}, 
    mouseout        : function() {}


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 {
	margin:0px 10px 0px 0px;

/*this defines the styling of the new flipped menu item*/
ul#flip_nav a.flipped_item {
	color: #ffffff;