In this post I'm going to show you how to animate a navigation menu using CSS transformations. At the time of this post, browsers support transformations only through vendor prefixes, so we're going to use them. Basically, we have a simple navigation menu like this:
<ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">Articles</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
The first styles attached are very simple:
#navigation {
margin: 1em 0 0 0;
padding: 0 0 0 1em;
height: 2em;
list-style: none;
border-bottom: 2px solid #000;
}
#navigation li {
float: left;
margin-left: 0.5em;
height: 100%;
}
#navigation a {
height: 100%;
line-height: 2;
background: #666;
border: 1px solid #000;
border-bottom: none;
color: #fff;
display: block;
text-decoration: none;
padding: 0 1em;
text-transform: uppercase;
font-weight: bold;
}
Now we're going to animate the menu items when a user hovers a link with his mouse. Here's the code:
#navigation a:hover {
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
As you can see, all menu items will be rotated counterclockwise for 10 degrees. The final effect is very peculiar and you can see it here.
Other cool menus at web-outils.com
Nicely done but it doesn't work on IE (obviously). However is there an internal IE trick to make it works?
Just wondering,
A CSS solution might be replacing the box with a background image, including text as graphics. You should use relative positioning to move it some way, because all items are floated. Further, you could add some effects with jQuery's animate().