Sliding menu using jQuery

Time for round #2! This time we’ll be building a sleek menu using jquery and some styles. What’s beautiful about jquery is how you can change a few bits and you get an entirely new effect. Last time we built some rollovers and tooltips using jquery and this time we’ll be building our slide menu on top of the same code. This tutorial assumes that you have a basic knowledge of jquery. Before we start, you might want to go ahead and try our example of sliding menus using jquery.

UPDATE: July 20. I’ve just posted a new version of the sliding menu, with image preloading and full block clickable.

The markup

This is exactly the same than before, but for the newcomers here it goes again:

<ul id="iconbar">
<li><a href="#">
<img src="key.gif" alt="" />
<span>Change your password</span>
</a></li>
<li><a href="http://feeds.feedburner.com/ilovecolors" target="_blank">
<img src="rss.gif" alt="" />
<span>Suscribe to our RSS!</span>
</a></li>
<li><a href="#">
<img src="sel.gif" alt="" />
<span>Choose your options!</span>
</a></li>
</ul>

As you can see is just a row of li’s with an anchor and two blocks inside it: an image, who triggers the hover event, and a span that is revealed when the event launches.

The idea here is to horizontally expand the li width, thus revealing the hidden span that at the same time will be animated in opacity fading in.

The styling

Basic as it is, it’s all we need.


#iconbar li            {
float:left; position:relative; margin-right:20px;
padding: 10px 5px 5px 10px;
width: 30px;
background:#eef;
border: 1px dashed #ffc0ff;
}
#iconbar span    {
width: 100px;
height: 35px;
position: absolute;
padding: 0px 5px 5px;
display: none;
line-height:110%;
color:#409BED;
}

I’ve added a background and a dashed border to the li element to show you that the event is triggered when are over the image and not over the li. We still need the absolute positiong of the span, which is relative to the ul element through the li element.

The code

Now that our elements are positioned we need to add some action to them!


jQuery(document).ready(function(){
$("#iconbar li img").hover(
function(){
var iconName = $(this).attr("src");
var origen = iconName.split(".")[0];
$(this).attr({src: "" + origen + "o.gif"});

$(this).parent().parent().animate({ width: "140px" }, {queue:false, duration:"normal"} );
$(this).parent().parent().find("span").animate({opacity: "show"}, "fast");
},
function(){
var iconName = $(this).attr("src");
var origen = iconName.split("o.")[0];
$(this).attr({src: "" + origen + ".gif"});

$(this).parent().parent().animate({ width: "30px" }, {queue:false, duration:"normal"} );
$(this).parent().parent().find("span").animate({opacity: "hide"}, "fast");
});
});

Right after the DOM is ready() we target the img element within each li element of our navigation bar.


$("#iconbar li img").hover(

and we pass the parameters (two functions in fact) that it needs: what to do when the mouse is over the image and what to do when the mouse leaves the image.


function(){

//when the mouse is over the image...

}

,    //notice the comma separating the two members...

function(){

//when the mouse leaves the image...

}

Now, when the mouse is over the image we need that the <li>, which is the parent of <a>, parent of <img>, expands its width to 140px.


$(this).parent().parent().animate({ width: "140px" }, {queue:false, duration:"normal"} );
$(this).parent().parent().find("span").animate({opacity: "show"}, "fast");

We’re using the animate function to smoothly increase the size (instead of a blocky jump), and of course, we pass as a parameter the desired width. The other parameters are equally important, and is queue:false what puts together everything. Suppose that you fastly move your mouse over the items. Since jQuery enqueues animations, and the animations we set are based on the $(this) element, jQuery will try to play all the animations which will likely cause a collision between two or more animations that jQuery tries to play. Enter the queue:false parameter. This will force jQuery to start the animation of the other items even if the last animation of the previous item hasn’t been completed.

Finally, in order to restore our item to its previous state, before the animation happened, we use


$(this).parent().parent().animate({ width: "30px" }, {queue:false, duration:"normal"} );
$(this).parent().parent().find("span").animate({opacity: "hide"}, "fast");

This will restore the original width attribute that is the same to the defined previously in the stylesheet and will hide or span tag.

So there you have it, your own menu with sliding items. If you haven’t, make sure you read the previous article on creating rollovers and tooltips using jquery and stay tuned for more! see you next time!

If you liked this you might want to buy me a coffee :)

Tags: resources

Spread the word, share this post

Posted on Tuesday, November 25th, 2008 in jQuery.
RSS 2.0 feed for comments.

Ehab

Hey ! Lovely site here. Love the small elements (such as this form design bg ). Subscribed in G-Reader

January 26th, 2009 at 7:16 pm

Elliot

Thanks for your kind words Ehab

January 27th, 2009 at 12:08 am

halocursed

Nice tutorial man..I hope u don’t mind if i edit it according to my needs ..
once again nice tutorial

March 30th, 2009 at 1:31 pm

Be my guest. I’m happy that it’s useful enough to be extended.

March 30th, 2009 at 6:08 pm

FirstBayTo

Приветствую, мне хотелось бы рассказать вам о новом сайте. Описания телефонов.

July 2nd, 2009 at 7:20 pm

Sliding Menu Using jQuery | Choose Daily

[...] Choose It AKPC_IDS += “95,”; This entry was posted on Sunday, July 5th, 2009. You can leave a comment, or trackback from your own site. [...]

July 5th, 2009 at 10:08 am

15 jQuery Tutorials For More Interactive Navigation

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

July 7th, 2009 at 1:18 pm

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

July 8th, 2009 at 10:57 am

Jquery Navigation Menu | SNilesh.com

[...] Menu using jQuery View Tutorial [...]

July 12th, 2009 at 3:54 am

20 jQuery Tutorials And Plugins To Impress Your Friends | Spyre Studios

[...] Sliding menu using jQuery ↓ [...]

July 19th, 2009 at 7:46 pm

Sliding menu using jQuery | jQuery | ilovecolors | Squico

[...] In: Design inspiration 19 Jul 2009 Go to Source [...]

July 19th, 2009 at 9:20 pm

GaGa

Great Post , but i have an idea what about making the whole block when expands clickable instead of the icon only.

July 19th, 2009 at 10:57 pm

Free wordpress themes

thanks a lot. great post.

July 20th, 2009 at 2:08 am

Bman

I agree – what about having the whole block trigger the button to expand rather than just the icon?

July 20th, 2009 at 2:49 am

Indeed, it’s a good idea. I will post (maybe tomorrow) a tutorial using this technique.

July 20th, 2009 at 3:07 am

Best jQuery Tutorials And Plugins for your website. | guidesigner.net

[...] Sliding menu using jQuery ? [...]

July 20th, 2009 at 8:47 am

Corey

Very nice menu! Is there anyway to ‘preload’ it as it isn’t functioning properly in Opera 10 but does after you sit on the icon -> hover away -> hover back on the icon.

Great work!

July 20th, 2009 at 1:35 pm

hurra

doesn´t work in opera

July 20th, 2009 at 6:14 pm

I’ve updated the example. It should be working fine now, I’m testing it in Opera 10 and I’ve seen the issue Corey commented about. I’ve added an image preload and it seems to be working fine. This is what I’ve added at the top of the script.
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
jQuery("”).attr(”src”, arguments[i]);
}
jQuery.preloadImages(”key.gif”);
jQuery.preloadImages(”keyo.gif”);
jQuery.preloadImages(”rss.gif”);
jQuery.preloadImages(”rsso.gif”);
jQuery.preloadImages(”sel.gif”);
jQuery.preloadImages(”selo.gif”);
I will post later a revision of the menu including full block clicking.

July 20th, 2009 at 6:35 pm

I’ve just posted the new sliding menu.

July 20th, 2009 at 11:46 pm

Awesome Job Elliot! =)

July 21st, 2009 at 12:31 pm

etkileyici jquery uygulamaları « Bay Bedava – Netten Başlıklar

[...] Replacing Content jQuery Demo: Creating A Sliding Image Puzzle Plug-In Creating A Fading Header Sliding menu using jQuery CSS Dock Menu jQuery Virtual Tour How to Load In and Animate Content with jQuery Nice & [...]

July 21st, 2009 at 4:45 pm

Etkileyici jquery uygulamaları | Aruha

July 22nd, 2009 at 4:33 pm

20个jQuery教程和插件 « SonicHTML – 高品质XHTML+CSS服务

July 24th, 2009 at 4:59 am

nitendra

Hi thanks for sharing such amazing ideas.

August 1st, 2009 at 2:45 pm

Etkileyici Jquery Uygulamaları | Arşiv Merkezi

August 10th, 2009 at 3:10 pm

Lam Nguyen

That’s a nice tut. I posted a similar post at http://aext.net/2009/08/kwicks-for-jquery-and-an-awesome-horizontal-animated-menu/ but more simple by just a little bit javascript.

August 17th, 2009 at 5:11 pm

Lam, that is hardly simpler. You’re loading two libraries in addition to jQuery library and adding a script.

August 19th, 2009 at 10:17 pm

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

August 21st, 2009 at 4:55 pm

20 jQuery Tutorials And Plugins To Impress Your Friends | WEBDESIGN FAN

August 22nd, 2009 at 6:43 pm

55 Decisive Useful jQuery Tutorials « my mcLife

[...] Sliding menu using jQuery [...]

November 29th, 2009 at 12:09 pm

+20 excellent jquery menus tutorials | ExtraTuts

[...] from here9.Simple JQuery Accordion menuvisit the tutorial from here10.jQuery Pop-up Menu Tutorialvisit the tutorial from here11.jquery feed menusvisit the tutorial from here12.Creating a Floating HTML Menu Using jQuery and [...]

November 29th, 2009 at 2:51 pm

55 Decisive Useful jQuery Tutorials « i-render | Creative Media

December 14th, 2009 at 11:03 am