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;
}Download
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
Firstly, this is a beautiful jQuery plugin and exactly what I was looking for.
However, I’m finding it difficult to center the navigation inline properly. Is there another way other than floating the nav to the left/setting a fixed width and just padding it from there?
I’ve tried text-align, setting my left and right margins to auto, changing the display and a few others but to no success …
Hi Rob,
You should be able to center the nav using the first method you mentioned, do you have a link to the page you’re having problems with? Sorry for the late reply…
-Garrett