• RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Home > Front End Development, HTML, How to, Javascript > How To Create an Animated Navigation with jQuery

How To Create an Animated Navigation with jQuery

July 21st, 2009

There is a lot of wicked cool navigations out there. This tutorial will hopefully help you jump on the bandwagon, and create a snazzy navigation for your own website.

What We Are Building

The idea is to build a menu that just displays icons, when the user rolls over each icon the text will appear below. The icon will also have a roll over state to help highlight the menu item.

DownloadExample

image

 

Getting Started

First thing we are going to do is setup a basic skeleton of the HTML file.  This will import jQuery, and setup the basic structure of the navigation.  If you don’t have the jQuery library you can get it at jQuery’s website.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery Navigation</title>
</head>

<body>
    <div id="menuBar">
        <ul>
            <li><a href="#" id="Home">Home</a></li>
            <li><a href="#" id="About">About</a></li>
            <li><a href="#" id="Gallery">Gallery</a></li>
            <li><a href="#" id="Contact">Contact</a></li>
        </ul>
    </div>
</body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

</html>

 

The Images

Your going to have 3 images. One being the background that the icons sit on. Two being the actual icons, and three being the icons roll over state.  Here is a look at the images we’ll be using.

Background

bar

Icons

 logos

Icons Over State

 logos-over

 

The background image will be applied to the div wrapping your menu list, and the icons and icon’s over state image will be sliced up and applied to each navigation element.  You could probably get a little more creative with your imagery than I did, but it will work for our purposes.

 

The CSS

The idea behind the CSS is to layout the navigation so it looks nice, handle the roll over state of each menu item, and prepare the navigation for animation.

 image

The div wrapper holds the background image, each of our menu items will then have their own background images (icons).  We will also add a top padding to each menu item so it pushes the text below the bottom of our wrapper. The important thing here is that we gave our div wrapper an overflow of hidden, this will hide the text of the menu items for us.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/* Div Wrapper */
#menuBar{
    /* Hide text that goes beyond
       the bottom of the wrapper */
    overflow:hidden;
   
    /* Give wrapper background image */
    width:503px;
    height:102px;
    background: transparent url(bar.jpg) no-repeat scroll left top;
   
    /* Center menu on page and give it a border */
    margin:0 auto;
    border:10px solid #111;
}

#menuBar ul{
    /* Center menu inside wrapper */
    width:380px;
    margin:0 auto;
   
    /* Get rid of bullets */
    list-style-type: none;
}

#menuBar ul li{
    /* Make menu horizontal */
    float:left;
   
    /* Add spacing between menu items */
    padding-right:40px;
   
}

#menuBar a{
   
    /* Give each menu item a background image */
    width:55px;
    height:102px;
    display:block;
    background: transparent url(logos.jpg) no-repeat scroll left top;

    /* Push text down below bottom of wrapper*/
    padding-top:100px;
   
    /* Beautify Text*/
    color:#ddd;
    font-family: Arial, "MS Trebuchet", sans-serif;
    text-decoration: none;
    font-size:10pt;
    font-weight:bold;
    outline:none;
}


#menuBar a:hover{
    /* change background image for rollover state */
    background-image:url(logos-over.jpg);
}


/* Position each background image accordingly
   to display icons */
#menuBar a#Home{
    background-position:-67px top;
}
#menuBar a#About{
    background-position:-166px top;
}
#menuBar a#Gallery{
    background-position:-266px top;
}
#menuBar a#Contact{
    background-position:-373px top;
}

 

Animating the Menu Text

Now comes the jQuery, what we plan to do is simply animated the top padding of each menu item on mouse over and on mouse out.

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
//Make sure the document is ready.
$(document).ready(function() {
   
    //Mouse Over function
    $("a").mouseover(function(){
       
        // Capture the id of the element that
        // is current rolled over.
        var selected = "#"+$(this).attr("id");
       
        //then animate it's top padding
        $(selected).animate({paddingTop:"78px"}, 100);
       
    //Mouse Out Function
    }).mouseout(function(){
       
        // Capture the id of the element that
        // is current rolled out.
        var selected = "#"+$(this).attr("id");
       
        //then animate it's top padding
        $(selected).animate({paddingTop:"100px"}, 100);
    });
   
});

 

 

That’s It

You now have yourself a shiny new navigation. (Side effects may include jealousy and envy among friends)  Here it is all together.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Jquery Navigation</title>
    <style type="text/css" media="screen">
       
        body{
            background-color: #333;
        }
       
        /* Div Wrapper */
        #menuBar{
            /* Hide text that goes beyond
               the bottom of the wrapper */
            overflow:hidden;
           
            /* Give wrapper background image */
            width:503px;
            height:102px;
            background: transparent url(bar.jpg) no-repeat scroll left top;
           
            /* Center menu on page and give it a border */
            margin:0 auto;
            border:10px solid #111;
        }
       
        #menuBar ul{
            /* Center menu inside wrapper */
            width:380px;
            margin:0 auto;
           
            /* Get rid of bullets */
            list-style-type: none;
        }
        #menuBar ul li{
            /* Make menu horizontal */
            float:left;
           
            /* Add spacing between menu items */
            padding-right:40px;
           
        }

        #menuBar a{
           
            /* Give each menu item a background image */
            width:55px;
            height:102px;
            display:block;
            background: transparent url(logos.jpg) no-repeat scroll left top;

            /* Push text down below bottom of wrapper*/
            padding-top:100px;
           
            /* Beautify Text*/
            color:#ddd;
            font-family: Arial, "MS Trebuchet", sans-serif;
            text-decoration: none;
            font-size:10pt;
            font-weight:bold;
            outline:none;
        }
       
       
        #menuBar a:hover{
            /* change background image for rollover state */
            background-image:url(logos-over.jpg);
        }
       
        /* Position each background image accordingly
           to display icons */
        #menuBar a#Home{
            background-position:-67px top;
        }
        #menuBar a#About{
            background-position:-166px top;
        }
        #menuBar a#Gallery{
            background-position:-266px top;
        }
        #menuBar a#Contact{
            background-position:-373px top;
        }
    </style>
   
</head>
<body>
    <div id="menuBar">
        <ul>
            <li><a href="#" id="Home">Home</a></li>
            <li><a href="#" id="About">About</a></li>
            <li><a href="#" id="Gallery">Gallery</a></li>
            <li><a href="#" id="Contact">Contact</a></li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $("a").mouseover(function(){
        var selected = "#"+$(this).attr("id");
        $(selected).animate({paddingTop:"78px"}, 100);
    }).mouseout(function(){
        var selected = "#"+$(this).attr("id");
        $(selected).animate({paddingTop:"100px"}, 100);
    });
});
</script>

</html>

 

DownloadExample
  • RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Author: Shawn Categories: Front End Development, HTML, How to, Javascript Tags: , , , ,
  1. B. Moore
    July 24th, 2009 at 02:52 | #1
    Reply | Quote

    any way to get rid of the flicker on the first attempt to hover over the menu. Flicker is gone after the first attempt.

  2. James Hare
    July 24th, 2009 at 07:49 | #2
    Reply | Quote

    Really simple yet useful post as usual – keep it up! I’ve only just found this feed and your tutorials have already helped me in a number of situations.

    In looking at your breakdown of images/css – it occured to me that you are using css ’sprites’ to minimise the amount of images you have. One further optimisation would be to extend that so that one image covered both the hover and normal states, changing the horizontal alignment as required. This would get rid of the dreaded ‘flicker’ you sometimes get when introducing an image on :hover in IE, and I reckon the consolidated image would have a smaller footprint than the two distinct images. I use the technique on a lot of sites I develop, let me know if you want to see some examples.

    That said, it *would* make your css more cluttered, so I suppose it keeps the tutorial more accessible to use two images and change image on :hover.

    Anyway, keep up the good work!

    James

  3. Shawn
    July 24th, 2009 at 07:50 | #3
    Reply | Quote

    Definitely, you just need to preload your images. Here is an article on doing just that: Creating a CSS Image Preloader

  4. James Hare
    July 24th, 2009 at 07:50 | #4
    Reply | Quote

    @B. Moore
    didn’t read your post before I posted mine – see my main post for a proposed fix to the flicker issue!

    Cheers,
    James

  5. Shawn
    July 24th, 2009 at 08:04 | #5
    Reply | Quote

    Thank you James. Fantastic Idea. I’ll have to use that for the next navigation I do.

Comments are closed.