23
http://net.tutsplus.com/tutorials/javascript-ajax/create- a-cool-animated-navigation-with-css-and-jquery/ 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

animated css

Embed Size (px)

Citation preview

Page 1: animated css

http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/

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.

Page 2: animated css

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

view plain copy to clipboard print ?

1. <!-- header section-->  2. <div id="header"></div>  3.   

Page 3: animated css

4. <!-- navigation section-->  5. <div id="navigation" class="container">  6.     <div><a href="#">home</a></div>  7.     <div><a href="#">about</a></div>  8.     <div><a href="#">services</a></div>  9.     <div><a href="#">solutions</a></div>  10.     <div><a href="#">contact</a></div>  11. </div>  12.   13. <!-- container section-->  14. <div class="container">  15.     <div id="content-title"></div>  16.     <!-- rest of the content -->  17. </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!

Page 4: animated css

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:

Page 5: animated css

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.

Page 6: animated css

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.

view plain copy to clipboard print ?

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

2. <html xmlns="http://www.w3.org/1999/xhtml">  3. <head>  4.     <title>slick animated menu</title>  5.     <!--our CSS file-->  6.     <link rel="stylesheet" href="css/main.css" type="text/css" />  7.     <!--jQuery library-->  8.     <script type="text/javascript" src="js/jquery.js" ></script>  9.     <!--jQuery plugin, we’ll get to this later-->  10.     <script type="text/javascript" src="js/jquery-bp.js" ></script>  11.     <!--Our animation script-->  12.     <script type="text/javascript" src="js/navigation.js" ></script>  13. </head>  14. <body>  15.     <div id="header"></div>  16.     <div id="navigation" class="container">  17.         <div id="home"><a href="home">home</a></div>  18.         <div id="about"><a href="about">about</a></div>  19.         <div id="services"><a href="services">services</a></div>  20.         <div id="solutions"><a href="solutions">solutions</a></div>  21.         <div id="contact"><a href="contact">contact</a></div>  22.     </div>  23.     <div class="container">  

Page 7: animated css

24.         <div class="content">  25.             <div id="content-title"></div>  26.             <!-- the rest of the content-->  27.         </div>  28.     </div>  29. </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 andI 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:

view plain copy to clipboard print ?

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

2. <html xmlns="http://www.w3.org/1999/xhtml">  3. <head>  4.     <title>slick animated menu</title>  5.   6.     <link rel="stylesheet" href="css/main.css" type="text/css" />  7.   8.     <script type="text/javascript" src="js/jquery.js" ></script>  9.     <script type="text/javascript" src="js/jquery-bp.js" ></script>  10.     <script type="text/javascript" src="js/navigation.js" ></script>  11. </head>  12. <body>  13.     <div id="header"></div>  14.     <div id="navigation" class="container">  15.         <div id="home" class="pri-nav"><div><a href="home">home</a></div></div>  16.         <div id="about" class="pri-nav"><div><a href="about">about</a></div></div>  17.         <div id="services" class="pri-nav"><div><a href="services">services</a></

div></div>  18.         <div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></

div></div>  19.         <div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></

div>  20.     </div>  21.     <div class="container">  

Page 8: animated css

22.         <div class="content">  23.             <div id="content-title"></div>  24.             <!-- the rest of the content-->  25.         </div>  26.     </div>  27. </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.

view plain copy to clipboard print ?

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:

Page 9: animated css

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 plain copy to clipboard print ?

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;  

Page 10: animated css

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 :

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.

view plain copy to clipboard print ?

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

Now it will look like this:

Page 11: animated css

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 plain copy to clipboard print ?

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:

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

view plain copy to clipboard print ?

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

Page 12: animated css

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.

view plain copy to clipboard print ?

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.

view plain copy to clipboard print ?

1. $(document).ready(function(){  2.    setBkgPos();  3.    4.    // bind the event to function here  5.    for ( i = 0; i < nav.length; i++ ) {  

Page 13: animated css

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.

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

view plain copy to clipboard print ?

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

Page 14: animated css

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:

1. The _getHPos is use to adjust the horizontal background position navigation for each item.

Page 15: animated css

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:

view plain copy to clipboard print ?

1. function mMouseOut(e)  2. {   3.    $(this)  4.    // stop any animation that took place before this  

Page 16: animated css

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 plain copy to clipboard print ?

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 plain copy to clipboard print ?

Page 17: animated css

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

Or if we are at 'about' it will become:view plain copy to clipboard print ?

1. <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:

view plain copy to clipboard print ?

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

Page 18: animated css

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.