jQuery Tutorial : Horizontal Animated Menu

25/01/2009 - 11:07 pm , {25} Comments
Posted by ronggur
Under Tutorials

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 :

jQuery library, you can download the latest version in http://code.google.com/p/jqueryjs/downloads/list
JavaScript document – let us named it ‘menu.js’
index.html
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 .

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

static07

Mar 12th, 2009

Great tut, however when you move over the buttons fast enough they stay expanded, and won’t contract again.

ronggur

Mar 13th, 2009

Thank’s

Yeah you right, i still didn’t get any clue how to fix it… there might be some problem with the css

25个强大的和有用的jQuery教程 - Code Index

Mar 16th, 2009

[...] Horizontal Animated Menu Demo URL : View Demo. Description : In this tutorial you will build a basic horizontal animated menu using jQuery. [...]

Robin

Mar 17th, 2009

You might want to add a function that removes the classes on all other buttons except for the one hovered – or something like that.

25 Powerful and Useful jQuery Tutorials for Developers and Designers : Speckyboy Design Magazine

Mar 18th, 2009

Ren

Mar 19th, 2009

Hi !

great tutorial – sort of like the kwick menu but then different.

Got a question about the code to use when you want a menu item to stay open when you clicked on it.. so that you could stand out from the rest using css for a color but also so that you could specify a different width or something.

Hope you could help me !

Thnx !

25 Powerful and Useful jQuery Tutorials for Developers and Designers | designersmantra.com

Apr 5th, 2009

Daniel

Apr 15th, 2009

Exelente !.

Daniel (Argentina).

setiawanthea

Apr 23rd, 2009

It’s Not working on IE6 yaa??

May 29th, 2009

Masa? harusnya sih bisa.. udah saya coba di beberapa browser termasuk ie6

15 jQuery Tutorials For More Interactive Navigation

Jul 7th, 2009

[...] Tutorial Demo [...]

Best jQuery Interactive Navigation Tutorials for Creative designs. | guidesigner.net

Jul 8th, 2009

Jquery Navigation Menu | SNilesh.com

Jul 14th, 2009

[...] menu using jQuery that shows more information about particular link when mouse is moved over it. View Tutorial [...]

Shropshire web designer

Jul 15th, 2009

Hiya.

I’ve seemingly found the simple fix to the ‘menu staying open when moving mouse too fast’ problem.

You’ve set the variable ‘initwidth’ within the hover function… this really should be set *before* the hover is called, as it is a static value.

The new function, in total, now reads…

$(document).ready(function() {
// initialize default menu width as a global
initwidth=$(“li”).width();

// hover in function
$(“li”).hover( function(){

// get the title inside
description = $(this).children(“a”).attr(“title”);
// start the animation
$(this).stop().animate({width: “220″},{queue:false, duration:”fast” });
// remove previously
$(this).children(“p”).remove();
// create and attach title into it
$(this).find(“a”).after(“”+description+”")
// 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”});
});
});

6 menus façon « Kwick » en jQuery | Développement | Dev'nsound

[...] Horizontal Animated Menu [...]

Jul 17th, 2009

I see.. thank you Chris for the solution, i really appreciate it

It’s About Time » links for 2009-07-19

Jul 19th, 2009

[...] jQuery Tutorial : Horizontal Animated Menu | Ronggur Hutasuhut Playground In this occasion, we’ll try to build basic horizontal animated menu using jQuery. Ok, lets just start it (tags: jquery navigation javascript menu tutorial tutorials menus) [...]

ueb3.com.br :: A web como ela é! » 12 Tutoriais de Menus Animados com jQuery

Aug 21st, 2009

si.donowp

Sep 5th, 2009

manteb ronggur…. gue lagi cari2, nemu http://speckyboy.com/2009/03/11/25-powerful-and-useful-jquery-tutorials-for-developers-and-designers/

eh link nyasarnya kemari…. goodjob bro.

marii om don, terimakasih sudah berkunjung .. sering2 datang ya, akan ada beberapa artikel yg sedang dipersiapkan *promosii*

SkyTeam » Blog Archive » Horizontal Animated Menu

Oct 4th, 2009

[...] http://sandbox.ronggur.com/2009/01/25/jquery-tutorial-horizontal-animated-menu/ view plaincopy to clipboardprint? [...]

ArleyM

Nov 14th, 2009

!important: Note that @Shropshire’s code needs a find and replace done on the (“) quotation marks and the paragraph tags need to be put back into the line:

$(this).find(“a”).after(“”+description+”")

note, I added spaces in the P tags to prevent the comment system from rendering them.

Great work!

Nov 20th, 2009

Thanks Arley for your note

Nicolas

Dec 24th, 2009

how can i had links in hte part that expands?

For what i have seen,
Home

the part that expands is the one taged as title (DUH ), but is there a way in which i can include for example more links when hovered?

Regads!

Dec 27th, 2009

@Nicolas : Sure, you can add inside/between this script

$(“li”).hover( function(){

}

or maybe you can change <p> tag with <a> tag