Animated Navigation with CSS & jQuery

Fancy but a very simple technique! The good thing about this technique is that it degrades gracefully and is still accessible even if js is turned off.


Step 1. Wireframe – HTML

This part is very simple. Your typical unordered list with links.

Step 2. Styling – CSS

Only thing special about the below properties will be that each list item has an overflow of hidden to imitate the masking technique.

Notice there were no duplicate tags in the markup in step 1. We will be adding that later with a few lines of jQuery.

ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;  /*--Important - Masking out the hover state by default--*/
float: left;
ul#topnav a, ul#topnav span { /*--The and share the same properties since the   will be a duplicate of the tag--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
background: url(a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px; /*--Vertical alignment of text--*/
ul#topnav a{ /*--This is basically the hover state of navigation--*/
color: #555;
background-position: left bottom;
ul#topnav span{ /*--Default state of navigation--*/
background-position: left top;

Step 3. Animation – jQuery

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file

You can choose to download the file from the jQuery site, or you can use this one hosted on Google.