Create a Cool Animated Navigation with CSS and jQuery

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether. Today we’re going to build a really cool animated navigation menu using just CSS and jQuery.

Demo and Source Code

Overview

The menu we’re building can be seen in the screenshot below. You can also see the final working version here.

I’m going to break this tutorial up into five sections as follows:

• Rough sketch
• Creating Resources
• Writing down the HTML
• Writing down the CSS
• Creating the animation using jQuery

Step 1 : Rough Sketch

First of all let us see what we need to do here.

So here’s a rough idea of what we should do:

• We will split the page into 4 parts, header, navigation and content header and the rest of content
• The header area will be simple <div> container
• The navigation area will be split into several <div> container matching the menu item.

Now most of the time we use <ul><li> container but since every menu item is unique,
I do not see the advantages of using <ul><li> so I am going to use <div> container instead.

• The content will be a simple <div> container

So to summarize it

<!-- header section-->
<div id="header"></div>

<!-- navigation section-->		
<div id="navigation" class="container">
	<div><a href="#">home</a></div>
	<div><a href="#">about</a></div>
	<div><a href="#">services</a></div>
	<div><a href="#">solutions</a></div>
	<div><a href="#">contact</a></div>
</div>

<!-- container section-->
<div class="container">
	<div id="content-title"></div>
	
</div>

It might help to show the directory structure I’m. The directory structure is as follows:

Step 2: Resources

I assume you have basic knowledge in dealing with Photoshop, so I will not give too detail instruction on creating the resources.
There are several things we need to create.

• Header background
• Content Title
• Navigation
• Background stripe

Note that if you wish to skip this step you can download the full zip of files at the end of the tutorial and extract my copies!

Okay, let’s create the header background. Open up Photoshop and create a 1×181 px canvas, or you can create it larger and then crop the image.
Create a layer and give it a linear gradient with Foreground to Background preset for 171px, this will be the main gradient.
Create another layer and give it a linear gradient with Foreground to Transparent preset for about 10px at the bottom of the first layer for some shadow effect.

Here is what it should look like, it is 100×181 px that I later crop to 1×181 px.

Save this as ‘hdr-bkg.png’ in our ‘img’ folder.

Next, we will create the content title. Again, open up Photoshop and create 934×284 px.
Create Rounded Rectangle using the appropriate tool, select the created shape, create a new layer, add a gradient and give it some drop shadow.
Then we will have something like this:

Save this as ‘content-title.png’ in ‘img’ folder.

Now let us create the resources needed by the navigation. We need two sets of navigation and a white box.

The white box is simple. Just create a rounded rectangle of about 98px x 58px and paint it with white. Ensure the background is transparent.

Save this as ‘white.jpg’ in ‘img’ folder.

For the navigation item, open your Photoshop and create a 490px x 58px document.
Create a rounded rectangular with about 98px x 58px and put some text in it. We will need two copy of each text.
I applied a little drop shadow on each text, this of course is optional. You can choose your own colors to put here.

Now simply duplicate this layer along the horizontal line. Apply different colors and text.

Save this as ‘nav.jpg’ in ‘img’ folder.

Finally, for the background stripe I have simply used an online tool called the Stripe Generator. The output looks like this:

You can see my settings here.
Of course you could just create the stripe yourself in Photoshop, but why not use a neat little web tool instead :-)

Step 3: HTML code

Now let’s jot down our HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>slick animated menu</title>
  	<!--our CSS file-->
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	<!--jQuery library-->
	<script type="text/javascript" src="js/jquery.js" ></script>
	<!--jQuery plugin, we’ll get to this later-->
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<!--Our animation script-->
	<script type="text/javascript" src="js/navigation.js" ></script>
</head>
<body>
	<div id="header"></div>
	<div id="navigation" class="container">
		<div id="home"><a href="home">home</a></div>
		<div id="about"><a href="about">about</a></div>
		<div id="services"><a href="services">services</a></div>
		<div id="solutions"><a href="solutions">solutions</a></div>
		<div id="contact"><a href="contact">contact</a></div>
	</div>
	<div class="container">
		<div class="content">
			<div id="content-title"></div>
			
		</div>
	</div>
</body>

This is prety much according to our gameplan explained on Step 1.

I have added a link to a ‘main.css’ file that is yet to be created and
I have also added some references to some javascript files. Since every navigation item is unique I have given each item an ID.
We will still need some common style to each of the menu items, this will make it easy for us to manage the style in later stages.

We will also have a white box on top of every navigation item appear, when we hover over the menu or a menu item is being selected, so we will need another <div> container for that. The final HTML will look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>slick animated menu</title>
  
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<script type="text/javascript" src="js/navigation.js" ></script>
</head>
<body>
	<div id="header"></div>
	<div id="navigation" class="container">
		<div id="home" class="pri-nav"><div><a href="home">home</a></div></div>
		<div id="about" class="pri-nav"><div><a href="about">about</a></div></div>
		<div id="services" class="pri-nav"><div><a href="services">services</a></div></div>
		<div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>
		<div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>
	</div>
	<div class="container">
		<div class="content">
			<div id="content-title"></div>
			
		</div>
	</div>
</body>

Save this as ‘index.html’. Up to this point we have this as our HTML page:

Step 4: CSS

Let us apply some basic style to the Web page. We will start by defining the background and adding a header area.

body {
	background: url(../img/body-bkg.jpg) repeat scroll;
	margin: 0;
	padding: 0;
}

.containe r{
	margin: 0pt auto;
	width:950px;
}
#header {
	background: url(../img/hdr-bkg.jpg) repeat-x scroll;
	height:181px;
}

Save this as ‘main.css’ in ‘css’ folder.

Now we have something that looks like:

Now let’s add style to each of the menu items. Remember we want the white box at the top each of menu item,
so the position must be set to absolute. Append the following style in our ‘main.css’ file.

#navigation{
	height:60px;
}

#home, #home div, 
#about, #about div, 
#services , #services div, 
#solutions, #solutions div, 
#contact,  #contact div {
	height:80px;
	position:absolute;
	width:97px;
	float:left;
}

#home, #about, #services, #solutions, #contact{
	background-image: url(../img/nav.jpg);
	background-attachment: scroll;
	background-repeat: no-repeat;
	top:171px;
}

#home{
	background-position: 0px -25px;
	margin-left:6px;
}

#about{
	background-position: -98px -25px;
	margin-left:105px;
}

#services{
	background-position: -196px -25px;
	margin-left:204px;
}

#solutions{
	background-position: -294px -25px;
	margin-left:303px;
}

#contact{
	background-position: -392px -25px;
	margin-left:402px;
}

#home div, #about div, #services div, #solutions div, #contact div {
	background-image: url(../img/white.jpg);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 0px -60px;	
}	

Now we have :

One problem, the <a href> link appears on top of the menu items, let’s remove that with a huge text indent – effectively taking it off the screen.
Add this to our style sheet.

.pri-nav a{
	display:block;
	text-decoration:none;
	text-indent:-30000px; 
}

Now it will look like this:

We’ve still got one problem, we would like the navigation menu to appear below the header shadow. We can achieve that by modifying our header style.

#header{
	background: url(../img/hdr-bkg.jpg) repeat-x scroll;
	height:181px;
	position:absolute;
	z-index :100; /* ensure the header is on top of navigation area */
	top: 0px;
	left:0px;
	width:100%;
}

Now because we used a .png file with transparency, it should look like this:

Perfect! Let’s add the content so we can get to our animation script.

.content{
	margin-top:160px;
}

#content-title{
	background: url(../img/content.jpg) no-repeat scroll;
	height:323px;
	position:absolute;
	width:100%;
}

Step 5: Animation script

First let’s download the latest jQuery script and place it in the ‘js’ folder.

The animation is basically a background position style manipulation.
Unfortunately jQuery has bug in animating background position style. But worry not! Alexander Farkas has created a plugin that solves this problem.
Download the file and rename it to jquery-bp.js and store it in the ‘js’ folder.

There is something we need to understand before proceeding. I quote from the plugin documentation:

Due to some browser bugs (i.e. Firefox, you have to set your (initial) background-position inline:
<div style=”background-position: 10px 20px”></div>
- Of course you can achieve this with JavaScript (jQuery), too:
$(‘#background’).css({backgroundPosition: ’10px 20px’});

Okay now that we understand that, let’s start. We will set the backgroud position style for every item in the beginning of our script.

// id for each of our menu items
var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];
$(document).ready(function(){
  setBkgPos();
});

function setBkgPos()
{
  for ( i = 0; i < nav.length; i++ ){
    $(nav[i]).css({backgroundPosition: i*(-98) + 'px -25px'});
    $(nav[i] + ' div').css({ backgroundPosition: '0px -60px'});
  }
}

Save this as 'navigation.js' in 'js' folder.

Now we will bind 3 events to each of the menu items. We can do this by invoking the bind function.

$(document).ready(function(){
  setBkgPos();

  // bind the event to function here
  for ( i = 0; i < nav.length; i++ ) {
    $(nav[i]).bind( 'mouseover', mMouseOver );
    $(nav[i]).bind( 'mouseout', mMouseOut );
    $(nav[i]).bind( 'click', mClick );
  }
});

Whenever a user hovers over the navigation item our script will call ‘mMouseOver’ function.
When the user hovers out of the navigation item our script will call ‘mMouseOut’ function.
And when the user clicks on the navigation item, our script will call ‘mClick’ function.

Step 5.1: Mouse over

Let’s create a “story board” for our mouse over animation.

On 'Mouse Over':

• Change the navigation menu image (glow) and change the cursor to pointer.
• The navigation will move up a bit.
• The white box will move down.
• The white box and the navigation menu will both down.
• The navigation menu and the white box will move up to its final position.
• And change the navigation menu image to its original state.

Okay let’s add these functions below the previous script:

function _getHPos( id )
{
  for ( i = 0; i < nav.length; i++ ){
    if ( '#' + id == nav[i] ){
      return i*(-98);
    }
  }	
  return 0;
}

function mMouseOver(e)
{	
  $(this)
  // stop any animation that took place before this
  .stop()
  // step 1. change the image file and change the cursor 
  .css({backgroundImage: 'url('+site_url+'img/nav-over.jpg)',cursor: 'pointer'})
  // step.2 move up the navigation item a bit
  .animate({ backgroundPosition:'(' + _getHPos( this.id ) +'px -30px}'},"fast",
    // this section will be executed after the step.2 is done
	function(){ 
	  $(this)
	    .children()
		  // step. 3 move the white box down
		  .animate({backgroundPosition:'(0px -40px)'},20)
		  // step 4. move the white box down
		  .animate({backgroundPosition:'(0px -20px)'},"fast");
	  $(this)
		// step 4. move the navigation item down
		.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'},"fast")
		// step 5. move the navigation item to its final position
		.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)'},"fast");
	  // store the parent element id for later usage
	  var parent = this;
	  $(this)
		.children()
		  // step 5. move the white box to its final position
		  .animate( {backgroundPosition:'(0px -45px)'},"fast",
			// this section will be executed after the step.2 is done
			function(){
			  // step.6 change the image to its original image	
			  $(parent).css({backgroundImage: 'url(img/nav.jpg)'});
			});	
	});
}
 

I need to explain several things here:

1. The _getHPos is use to adjust the horizontal background position navigation for each item.
   For example, the ‘Home’ item background will start from 0, the ‘About’ horizontal background position starts from -98px, and so on.
2. Also notice that early in the function we invoke the ‘stop’ function. We do this to ensure whatever animation was running before the ‘mouse over’ event has stopped.
   Why? We will add another animation later on for the ‘mouse out’ event.
   Now let us suppose the user hover over an item and then quickly move the mouse pointer some place else and again quickly hover over the same item.
   If we do not stop the animation before each event, there will be a delay because some part of the animation will be queued or even worse the animation will become inconsistent and annoy the user.

Step 5.2: Mouse out

Now that is done. Let's create "story board" for the 'mouse out' event

On 'Mouse Out':

• Move down the navigation item.
• Move the white box down.
• Move the navigation up.
• Move the navigation item up to its original position.
• Move the white box to its original position ( invisible ).
• Return the cursor to normal.

The code:

function mMouseOut(e)
{			
  $(this)
  // stop any animation that took place before this
  .stop()
  // step.1 move down navigation item
  .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 40px )'}, "fast", 
    // this section will be executed after the step.1 is done
    function(){
      // step.2 white box move really fast
      $(this).children().animate({backgroundPosition:'(0px 70px)'}, "fast");
      // step 3. move navigation item up
      $(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -40px)'}, "fast", 
      // this section will be executed after the step.3 is done
        function(){
          // step 4. move navigation item ot its original position
          $(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -25px)'}, "fast",
            // this section will be executed after the step.4 is done
            function(){
              // move white box to its original position, ready for next animation
              $(this).children().css({ backgroundPosition:'0px -60px'});
            })
        })
    })
    .css({backgroundImage: 'url(img/nav.jpg)', cursor: ''});
}

Step 5.3: Click

Almost there! Now we need to handle when a user click on the navigation item.

function mClick(e)
{
  location.href = this.id;
}

Of course you can point to wherever location you see fit here. This particular function will direct your browser to [current_url]/[navigation_id] so for ‘home’ it will be ‘[current_url]/home’, for ‘about’ it will be ‘[current_url]/about’ and so on.

Step 5.4: Current page indicator

Of course we need an indicator when we are already on a page. For that we need another CSS class.
We will call that class ‘active’. For instance if we are now at 'home' the HTML file will become:

<div id="home" class="pri-nav active"><div><a href="home">home</a></div></div>

Or if we are at 'about' it will become:

<div id="about" class="pri-nav active"><div><a href="about">about</a></div></div>

and so on.

So now the idea is after a page is loaded our script will check to see which navigation item has the ‘active’ class.
We then apply an animation effect. And we need to ensure any other events ( ‘mouseover’, ‘mouseout’, ‘click’) will not cause any animation effect on this 'active' item.

For that we need to change our code a bit. Here is the complete code after the changes:

var site_url = '';
var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];

$(document).ready(function(){
  setBkgPos();

  for ( i = 0; i < nav.length; i++ ) {
    $(nav[i]).bind( 'mouseover', mMouseOver );
    $(nav[i]).bind( 'mouseout', mMouseOut );
    $(nav[i]).bind( 'click', mClick );
  }

  for ( i = 0; i < nav.length; i++ ) {
    // element with ‘active’ class will  start animation 
    if ( $(nav[i]).get(0).className.indexOf('active') >= 0 ){
      $(nav[i])
      .animate({ backgroundPosition:'(' + _getHPos( nav[i] ) +'px -30px}'},"fast",
        function(){ 
          $(this)
            .children()
            .animate({backgroundPosition:'(0px -40px)'},20)
            .animate({backgroundPosition:'(0px -20px)'},"fast");
          $(this)
            .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 50px)'},"fast")
            .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 25px)'},"fast");
          var parent = this;
          $(this)
            .children()
            .animate( {backgroundPosition:'(0px -45px)'},"fast",
			  function(){
                $(parent).animate({backgroundPosition:'(' + _getHPos( parent.id ) +'px 25px)'},"fast");
                $(parent).css({backgroundImage: 'url(img/nav.jpg)'});
              });
        });
        break;
    }
  }
}); 

Finished!

And with that we have our entire nifty little menu.

Download a ZIP of the Site

View a Demo!