jQuery Tutorial : Horizontal Animated Menu

by ronggur on January 25, 2009

In this occasion, we’ll try to build basic horizontal animated menu using jQuery. Ok, lets just start it

Step 1 : Create files needed

Ok, first let us create files needed to build this ‘menu’. All we need is :

  1. jQuery library, you can download the latest version in http://code.google.com/p/jqueryjs/downloads/list
  2. JavaScript document – let us named it ‘menu.js’
  3. index.html
  4. style.css

Let we bundle it in one directory.

Step 2:Build html structure

After all files created then we can start from build some structure in index.html including embedding documents from outside (jQuery library, style.css, menu.js) into <head> section. If you too lazy to type it your self, all you have to do just copy following code into your index.html :p.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jquery Tutorial : Horizontal animated menu</title>
<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#" title="Go to the front page">Home</a></li>
<li><a href="#" title="Want to know more about us?">About Us</a></li>
<li><a href="#" title="Keep in touch with us, call any time you want">Contact Us</a></li>
</ul>
</div>
</body>
</html>

Finished? lets go to the next step

Step 3 : Create style sheet code

We need some basic styles to make the menu working. Tag <p> is to display menu description. This <p> will create automatically by using jQuery function and value in it is taken from ‘title’ attribute in <a> inside the list. We’ll see it later.


*{
margin:0;
padding:0;
}
body{
font:12px Arial, Helvetica, sans-serif;
color:white;
}
a{
text-decoration:none;
color:white;
}
#wrapper{
padding:40px 40px;
}
#menu{
float:left;
}
ul,li{
list-style:none;
}
li{
padding:10px 10px;
height:40px;
float:left;
width:100px;
background-color:#333333;
border-right:1px solid #666666;
overflow:hidden;
display:block;
}
li a{
float:left;
vertical-align:top;
position:absolute;
}
li p{
vertical-align:top;
text-align:left;
margin-left:0;
margin-top:0;
padding-left:65px;
width:155px;
text-align:right;
color:#CCCCCC;
display:none;
}

Step 4: Create javascript code

After styles code finished, last step is code for javascript. You can copy my code below. I already put comment each line.

*update script in Friday 17 July 2009 - thanks to http://www.pixelmakers.co.uk


$(document).ready(function() {
// initialize default menu width

initwidth = $("li").width(); // updated

// hover in
$("li").hover( function(){
// get the title inside <a>
description = $(this).children("a").attr("title");
// start the animation
$(this).stop().animate({width: "220"},{queue:false, duration:"fast" });
// remove previously <p>
$(this).children("p").remove();
// create <p> and attach title into it
$(this).find("a").after("<p>"+description+"</p>")
// create animation to make it looks good
$(this).children("p").stop().animate({ opacity: "show" }, {queue:false, duration:"fast"});
// hover out
},function(){
// animate it to the basic width
$(this).stop().animate({width: initwidth},{queue:false, duration:"fast"});
// fade out animation
$(this).children("p").stop().animate({ opacity: "0" }, {queue:false, duration:"fast"});
});
});

Done!, that’s all. If you’ve been following the steps correctly, the menu effect should working properly.

Let me know if there’s somethin more easy step to make the similar effect, cause i’m also in learning jQuery :D .

You can view the demo here or download full sourcode jQuery Tutorial : Horizontal Animated Menu | size : 20.2 kB

You can give me some coffee if you want to :D