CSS: a menu with transformations

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>

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.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

3 thoughts on “CSS: a menu with transformations”

  1. 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().

Leave a Reply

Note: Only a member of this blog may post a comment.