menuFlip is a jQuery plugin for adding a ‘flipping’ 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>Calling the Plugin
$(function() {
$('#flip_nav').menuFlip();
});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;
}You can download this plugin from the GitHub repository here.
Thanks ! you give the solution for my problem with an example. I found it everywhere but i didn’t so really thanks for it.
I have a problem.
when i put a logo beside the list it becomes affected too. .
i placed the logo as a list. .
Hi Jinrou,
Yea, any list item within that ul will get this effect. If that’s not what you want you’ll need to place your logo outside of the ul.
I’ve actually made this into a jQuery plugin for ease of use if you’re interested. It can be found here:https://github.com/grimmdude/jQuery-menuFlip
-Garrett