Animation are great ways for user in nav gating 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 website or just for web blog with really cool animated navigation menu using just CSS and jQuery.

The menu we're building can be seen in the screenshot below.

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
  container
• The navigation area will be split into several
  container matching the menu item.
• Now most of the time we use
  • container but since every menu item is unique, I do not see the advantages of using
    • so I am going to use
      container instead. The content will be a simple

      container

    
    So to summarize it

     

    view plaincopy to clipboardprint?

    3. 
       
    6. home
    7. about
    8. services
    9. solutions
    10. contact
  • 
    
  • • Header background
    • Content Title
    • Navigation
    • Background stripe

  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.

  
  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 1x181 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 100x181 px that I later crop to 1x181 px.

  

  Save this as 'hdr-bkg.png' in our 'img' folder.
  
  Next, we will create the content title. Again, open up Photoshop and create 934x284 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.

  HTML clipboard

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

  HTML clipboard

  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: HTML clipboard

  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.

  view plaincopy to clipboardprint?
  4. slick animated menu
  17. home
  18. about
  19. services
  20. solutions
  21. contact

  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

  container for that. The final HTML will look like this:
   
  view plaincopy to clipboardprint?
  4. slick animated menu
  5. 
     
  7. 
     
  15. home
  16. about
  17. services
  18. solutions
  19. contact
  • • 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.
    • 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.

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

  HTML clipboard

  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.
  
  view plaincopy to clipboardprint?
  1. body {
  2. background: url('/../img/body-bkg.jpg') repeat scroll;
  3. margin: 0;
  4. padding: 0;
  5. }
  6. 
     
  7. .containe r{
  8. margin: 0pt auto;
  9. width:950px;
  10. }
  11. #header {
  12. background: url('/../img/hdr-bkg.jpg') repeat-x scroll;
  13. height:181px;
  14. }
  Save this as ‘main.css’ in 'css' folder. Now we have something that looks like: HTML clipboard

  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.

  view plaincopy to clipboardprint?
  1. #navigation{
  2. height:60px;
  3. }
  4. 
     
  5. #home, #home div,
  6. #about, #about div,
  7. #services , #services div,
  8. #solutions, #solutions div,
  9. #contact, #contact div {
  10. height:80px;
  11. position:absolute;
  12. width:97px;
  13. float:left;
  14. }
  15. 
      
  16. #home, #about, #services, #solutions, #contact{
  17. background-image: url('/../img/nav.jpg');
  18. background-attachment: scroll;
  19. background-repeat: no-repeat;
  20. top:171px;
  21. }
  22. 
      
  23. #home{
  24. background-position: 0px -25px;
  25. margin-left:6px;
  26. }
  27. 
      
  28. #about{
  29. background-position: -98px -25px;
  30. margin-left:105px;
  31. }
  32. 
      
  33. #services{
  34. background-position: -196px -25px;
  35. margin-left:204px;
  36. }
  37. 
      
  38. #solutions{
  39. background-position: -294px -25px;
  40. margin-left:303px;
  41. }
  42. 
      
  43. #contact{
  44. background-position: -392px -25px;
  45. margin-left:402px;
  46. }
  47. 
      
  48. #home div, #about div, #services div, #solutions div, #contact div {
  49. background-image: url('/../img/white.jpg');
  50. background-attachment: scroll;
  51. background-repeat: no-repeat;
  52. background-position: 0px -60px;
  53. }

  Now we have

  HTML clipboard

  One problem, the 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.

  1. .pri-nav a{
  2. display:block;
  3. text-decoration:none;
  4. text-indent:-30000px;
  5. }

  Now it will look like this:

  HTML clipboard

  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.

  view plaincopy to clipboardprint?
  1. #header{
  2. background: url('/../img/hdr-bkg.jpg') repeat-x scroll;
  3. height:181px;
  4. position:absolute;
  5. z-index :100; /* ensure the header is on top of navigation area */
  6. top: 0px;
  7. left:0px;
  8. width:100%;
  9. }

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

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

  view plaincopy to clipboardprint?
  1. .content{
  2. margin-top:160px;
  3. }
  4. 
     
  5. #content-title{
  6. background: url('/../img/content.jpg') no-repeat scroll;
  7. height:323px;
  8. position:absolute;
  9. width:100%;
  10. }

  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:
  - 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.
  
  view plaincopy to clipboardprint?
  1. // id for each of our menu items
  2. var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];
  3. $(document).ready(function(){
  4. setBkgPos();
  5. });
  6. 
     
  7. function setBkgPos()
  8. {
  9. for ( i = 0; i < nav.length; i++ ){
  10. $(nav[i]).css({backgroundPosition: i*(-98) + 'px -25px'});
  11. $(nav[i] + ' div').css({ backgroundPosition: '0px -60px'});
  12. }
  13. }
  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.
  
  1. $(document).ready(function(){
  2. setBkgPos();
  3. 
     
  4. // bind the event to function here
  5. for ( i = 0; i < nav.length; i++ ) {
  6. $(nav[i]).bind( 'mouseover', mMouseOver );
  7. $(nav[i]).bind( 'mouseout', mMouseOut );
  8. $(nav[i]).bind( 'click', mClick );
  9. }
  10. });

  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

   

   

  HTML clipboard

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

  view plaincopy to clipboardprint?
  1. function _getHPos( id )
  2. {
  3. for ( i = 0; i < nav.length; i++ ){
  4. if ( '#' + id == nav[i] ){
  5. return i*(-98);
  6. }
  7. }
  8. return 0;
  9. }
  10. 
      
  11. function mMouseOver(e)
  12. {
  13. $(this)
  14. // stop any animation that took place before this
  15. .stop()
  16. // step 1. change the image file and change the cursor
  17. .css({backgroundImage: 'url('+site_url+'img/nav-over.jpg)',cursor: 'pointer'})
  18. // step.2 move up the navigation item a bit
  19. .animate({ backgroundPosition:'(' + _getHPos( this.id ) +'px -30px}'},"fast",
  20. // this section will be executed after the step.2 is done
  21. function(){
  22. $(this)
  23. .children()
  24. // step. 3 move the white box down
  25. .animate({backgroundPosition:'(0px -40px)'},20)
  26. // step 4. move the white box down
  27. .animate({backgroundPosition:'(0px -20px)'},"fast");
  28. $(this)
  29. // step 4. move the navigation item down
  30. .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'},"fast")
  31. // step 5. move the navigation item to its final position
  32. .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)'},"fast");
  33. // store the parent element id for later usage
  34. var parent = this;
  35. $(this)
  36. .children()
  37. // step 5. move the white box to its final position
  38. .animate( {backgroundPosition:'(0px -45px)'},"fast",
  39. // this section will be executed after the step.2 is done
  40. function(){
  41. // step.6 change the image to its original image
  42. $(parent).css({backgroundImage: 'url('/img/nav.jpg')'});
  43. });
  44. });
  45. }
  46. 
      

  I need to explain several things here:

  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.

  HTML clipboard

   

  The code:

  view plaincopy to clipboardprint?
  1. function mMouseOut(e)
  2. {
  3. $(this)
  4. // stop any animation that took place before this
  5. .stop()
  6. // step.1 move down navigation item
  7. .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 40px )'}, "fast",
  8. // this section will be executed after the step.1 is done
  9. function(){
  10. // step.2 white box move really fast
  11. $(this).children().animate({backgroundPosition:'(0px 70px)'}, "fast");
  12. // step 3. move navigation item up
  13. $(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -40px)'}, "fast",
  14. // this section will be executed after the step.3 is done
  15. function(){
  16. // step 4. move navigation item ot its original position
  17. $(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -25px)'}, "fast",
  18. // this section will be executed after the step.4 is done
  19. function(){
  20. // move white box to its original position, ready for next animation
  21. $(this).children().css({ backgroundPosition:'0px -60px'});
  22. })
  23. })
  24. })
  25. .css({backgroundImage: 'url('/img/nav.jpg')', cursor: ''});
  26. }

  Step 5.3: Click

  
  Almost there! Now we need to handle when a user click on the navigation item.
  
  view plaincopy to clipboardprint?
  1. function mClick(e)
  2. {
  3. location.href = this.id;
  4. }
  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:
  
  view plaincopy to clipboardprint?
  1. home
  Or if we are at 'about' it will become:
  view plaincopy to clipboardprint?
  1. about
  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:

  view plaincopy to clipboardprint?
  1. var site_url = '';
  2. var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];
  3. 
     
  4. $(document).ready(function(){
  5. setBkgPos();
  6. 
     
  7. for ( i = 0; i < nav.length; i++ ) {
  8. $(nav[i]).bind( 'mouseover', mMouseOver );
  9. $(nav[i]).bind( 'mouseout', mMouseOut );
  10. $(nav[i]).bind( 'click', mClick );
  11. }
  12. 
      
  13. for ( i = 0; i < nav.length; i++ ) {
  14. // element with ‘active’ class will  start animation
  15. if ( $(nav[i]).get(0).className.indexOf('active') >= 0 ){
  16. $(nav[i])
  17. .animate({ backgroundPosition:'(' + _getHPos( nav[i] ) +'px -30px}'},"fast",
  18. function(){
  19. $(this)
  20. .children()
  21. .animate({backgroundPosition:'(0px -40px)'},20)
  22. .animate({backgroundPosition:'(0px -20px)'},"fast");
  23. $(this)
  24. .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 50px)'},"fast")
  25. .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 25px)'},"fast");
  26. var parent = this;
  27. $(this)
  28. .children()
  29. .animate( {backgroundPosition:'(0px -45px)'},"fast",
  30. function(){
  31. $(parent).animate({backgroundPosition:'(' + _getHPos( parent.id ) +'px 25px)'},"fast");
  32. $(parent).css({backgroundImage: 'url('/img/nav.jpg')'});
  33. });
  34. });
  35. break;
  36. }
  37. }
  38. });

  Finished!

  
  And with that we have our entire nifty little menu.

  Download a ZIP of the Site

  View a Demo