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: , , , ,



Top