In this mini tutorial, I am going to show you how to make an animated navigation menu using only the magic of CSS3 (see demo here). So, let’s start.

1  The HTML Part

First, you will need to define your menu like usual, as the following:

1
2
3
4
5
6
7
8
<ul id="menu">
 <li><a id="menu-1" href="#menu-1">Menu #1</a></li>
 <li><a id="menu-2" href="#menu-2">Menu #2</a></li>
 <li><a id="menu-3" href="#menu-3">Menu #3</a></li>
 <li><a id="menu-4" href="#menu-4">Menu #4</a></li>
 <li><a id="menu-5" href="#menu-5">Menu #5</a></li>
 <li><a id="menu-6" href="#menu-6">Menu #6</a></li>
</ul>

The code above is straightforward. A simple unordered list with some items. Please note each item must have an ID.

2 The CSS Part

Now, we are going to start styling our menu.

1
2
3
4
5
6
7
ul#menu {
 list-style:none;
 margin:10% 0 0 0;
 padding:0;
 width:150px;
 position:fixed;
}

As you can see from the CSS code above, we gave our menu a fixed width and position. These two properties allow us to place our menu any where on the page; I decided to put the menu on the left side of the page, but of course feel free to position your menu any where your like.

We are now going to style the menu items, and more precisely, the links

1
2
3
4
5
6
7
8
9
10
11
12
13
ul#menu a {
 text-decoration:none;
 font-weight:bolder;
 color:#000;
 left:-130px;
 padding:20px;
 margin:0 2px;
 display:block;
 position:relative;
 border:1px solid #aaa;
 border-radius:0 5px 5px 0;
 box-shadow:0 0 10px #aaa;
}

The most important part of the code above, is the left property of the link tag. In fact, for each link tag, we set its left offset to be outside of the viewport.

So now, we want our link tags to translate from the outside of the viewport to the inside, so we can see them. We are going to do that by defining the following CSS rule:

1
2
3
ul#menu li:hover > a {
 left:-2px;
}

What this rule does is quite simple: when we hover over a list item, go ahead and translate its direct children of type a. Right?

But hey! There is no animation yet? How comes?

Well, guess what, we are going to turn this “static” translation to an animated translation by simply adding the following CSS3 property to our link tags:

1
 transition:left 0.5s ease;

This is cool, isn’t it?

So, this transition property does the following: it tries to animate the left property of the link tags for 500 ms. In addition, it applies an ease effect to the animation. For more information about the transition feature of CSS3, you can read the W3C specification at http://www.w3.org/TR/css3-transitions/.

Let’s add some colors to our menu:

1
2
3
4
5
6
a#menu-1 {background:#FF0084;}
a#menu-2 {background:#4096EE;}
a#menu-3 {background:#6BBA70;}
a#menu-4 {background:#C3D9FF;}
a#menu-5 {background:#F9F7ED;}
a#menu-6 {background:#CDEB8B;}

That’s it!! We have an animated CSS3 navigation menu!

And here is the final code

1
2
3
4
5
6
7
8
<ul id="menu">
 <li><a id="menu-1" href="#menu-1">Menu #1</a></li>
 <li><a id="menu-2" href="#menu-2">Menu #2</a></li>
 <li><a id="menu-3" href="#menu-3">Menu #3</a></li>
 <li><a id="menu-4" href="#menu-4">Menu #4</a></li>
 <li><a id="menu-5" href="#menu-5">Menu #5</a></li>
 <li><a id="menu-6" href="#menu-6">Menu #6</a></li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
ul#menu {
 list-style:none;
 margin:10% 0 0 0;
 padding:0;
 width:150px;
 position:fixed;
}
ul#menu a {
 text-decoration:none;
 font-weight:bolder;
 color:#000;
 left:-130px;
 padding:20px;
 margin:0 2px;
 display:block;
 position:relative;
 border:1px solid #aaa;
 border-radius:0 5px 5px 0;
 box-shadow:0 0 10px #aaa;
 transition:left 0.5s ease;
}
a#menu-1 {background:#FF0084;}
a#menu-2 {background:#4096EE;}
a#menu-3 {background:#6BBA70;}
a#menu-4 {background:#C3D9FF;}
a#menu-5 {background:#F9F7ED;}
a#menu-6 {background:#CDEB8B;}

3 Demo

You view the final result here

Enjoy