Athena - Responsive Flat WordPress Theme for Personal Blogs and Shops

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!


“Sliding menu using jQuery” received 71 comments! Add yours.

  1. Ehab January 26th, 2009

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

  2. Elliot January 27th, 2009

    Thanks for your kind words Ehab

  3. halocursed March 30th, 2009

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

  4. Elliot March 30th, 2009

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

  5. FirstBayTo July 2nd, 2009

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

  6. Sliding Menu Using jQuery | Choose Daily July 5th, 2009

    [...] 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. [...]

  7. 15 jQuery Tutorials For More Interactive Navigation July 7th, 2009

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

  8. Best jQuery Interactive Navigation Tutorials for Creative designs. | guidesigner.net July 8th, 2009

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

  9. Jquery Navigation Menu | SNilesh.com July 12th, 2009

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

  10. 20 jQuery Tutorials And Plugins To Impress Your Friends | Spyre Studios July 19th, 2009

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

  11. Sliding menu using jQuery | jQuery | ilovecolors | Squico July 19th, 2009

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

  12. GaGa July 19th, 2009

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

  13. Free wordpress themes July 20th, 2009

    thanks a lot. great post.

  14. Bman July 20th, 2009

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

  15. Elliot July 20th, 2009

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

  16. Best jQuery Tutorials And Plugins for your website. | guidesigner.net July 20th, 2009

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

  17. Corey July 20th, 2009

    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!

  18. hurra July 20th, 2009

    doesn´t work in opera :-(

  19. Elliot July 20th, 2009

    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.

  20. Elliot July 20th, 2009

    I’ve just posted the new sliding menu.

  21. Corey July 21st, 2009

    Awesome Job Elliot! =)

  22. etkileyici jquery uygulamaları « Bay Bedava – Netten Başlıklar July 21st, 2009

    [...] 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 & [...]

  23. Etkileyici jquery uygulamaları | Aruha July 22nd, 2009

    [...] 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 & [...]

  24. 20个jQuery教程和插件 « SonicHTML – 高品质XHTML+CSS服务 July 24th, 2009

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

  25. nitendra August 1st, 2009

    Hi thanks for sharing such amazing ideas.

  26. Etkileyici Jquery Uygulamaları | Arşiv Merkezi August 10th, 2009

    [...] 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 & [...]

  27. Lam Nguyen August 17th, 2009

    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.

  28. Elliot August 19th, 2009

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

  29. ueb3.com.br :: A web como ela é! » 12 Tutoriais de Menus Animados com jQuery August 21st, 2009

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

  30. 20 jQuery Tutorials And Plugins To Impress Your Friends | WEBDESIGN FAN August 22nd, 2009

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

  31. 55 Decisive Useful jQuery Tutorials « my mcLife November 29th, 2009

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

  32. +20 excellent jquery menus tutorials | ExtraTuts November 29th, 2009

    [...] 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 [...]

  33. 55 Decisive Useful jQuery Tutorials « i-render | Creative Media December 14th, 2009

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

  34. 55 Decisive Useful jQuery Tutorials « i-render | Creative Media December 14th, 2009

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

  35. 55 Decisive Useful jQuery Tutorials « i-render | Creative Media December 14th, 2009

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

  36. 14个出色的导航菜单实例教程 - 菠菜博 December 29th, 2009

    [...] Sliding Menu using jQuery | 演示 [...]

  37. Сергей January 3rd, 2010

    А что Вы скажете, если я возьму на себя смелость утверждать, что все Ваши посты, не более чем выдумка автора?

  38. 14个出色的jQuery导航菜单实例教程 « Dfey Creative Minds January 20th, 2010

    [...] Sliding Menu using jQuery | 演示 [...]

  39. daddy design February 4th, 2010

    nice article and digging your site as well!!

  40. Elio February 5th, 2010

    thanks… daddy? LOL :D

  41. Connor February 8th, 2010

    is there a way you could specify one to stay open if the mouse isn’t on any of the items (eg like a current page indication)?

  42. shibbir February 17th, 2010

    so so so cute website!!!

  43. 4mul March 10th, 2010

    Inspiring Designs Sliders Content;
    http://www.ueuh.com/internet/inspiring-designs-sliders-content/

  44. Indialike March 12th, 2010

    Very nice and useful tutorials for web designers,
    Thanks for posting.

  45. Elio March 12th, 2010

    I’m happy that you found the site useful :D

  46. 20 jQuery Tutorials And Plugins To Impress Your Friends « Lehoaian’s Blog March 21st, 2010

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

  47. canistervacuumbagless March 25th, 2010

    great technic

  48. 99 техник создания меню для сайта CSS и jQuery | SHEBEKO.COM March 25th, 2010

    [...] Слайд меню на jQuery | Демо версия [...]

  49. Nicholas Mcraney April 2nd, 2010

    thanks very much, I must say your blog is brilliant!

  50. Web Design April 29th, 2010

    Cool menu thanks so much
    thanks for sharing

  51. 55 Decisive Useful jQuery Tutorials « FED视野 July 15th, 2010

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

  52. argozid August 9th, 2010

    Beautifully. Very pleased!

  53. Avi August 25th, 2010

    Hi
    Nice script.
    Thanks
    Avi

  54. Pixels design September 10th, 2010

    Looks simple and elegant, thanks.

  55. affordable web solutions September 13th, 2010

    Nice sliding menu. Is it possible to slide above instead of side..

  56. Sam September 17th, 2010

    Nice examples

  57. Diesel Engine November 6th, 2010

    jQuery is indeed an interesting feature that helps a lot at design , and in making eye-catchy things.

  58. 55 jQuery实用教程 | ued二区 January 13th, 2011

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

  59. vision without glasses pdf June 16th, 2011

    Im finding jquery too hard to get my head around. Can anyone recommend simple and easy to understand tutorials please?

  60. mohammad July 27th, 2011

    im also a web developer and graphic designer i just love your site its so simple and dreamy .. n1

  61. shaghayegh August 2nd, 2011

    hi, u have beautiful site design…,im designer
    GOOD LUCK!

  62. 5 kule jQuery menyer til din hjemmeside | Dittnettsted.com September 6th, 2011

    [...] Slide Meny som bruker jQuery en original meny med ikoner [...]

  63. Y8 games November 14th, 2011

    I like this menu. Thanks for post

  64. jquery by kida72124 - Pearltrees December 21st, 2011

    [...] Sliding menu using jQuery | jQuery | ilovecolors [...]

  65. Top Jquery Links |Avnish Namdev December 21st, 2011

    [...] http://www.ilovecolors.com.ar/sliding-menu-using-jquery/ Tutorial on sliding Menu Using jQuery [...]

  66. Texas Instruments Calculators January 1st, 2012

    This really helped, thanks!

  67. Collection of jQuery Tutorials And Plugins To Impress Your Friends January 30th, 2012

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

  68. JQuery Menu PluginsNextGen | Next Gen Templates December 18th, 2012

    [...] This tutorial shows you how to build a sliding menu that shows more information when the mouse is hovered over it. View Demo [...]

  69. 20 FLASH-LIKE JQUERY PLUGINS | Rohidas Vitthal Sanap: Web Developer/Designer February 22nd, 2013

    [...]   [...]

  70. 15 jQuery Tutorials For More Interactive Navigation | Download-video-bokep.com March 8th, 2014

    […] icon based sliding menu that shows more information about a link when mouse is moved over an icon. Tutorial             […]

  71. Sedat Kumcu March 17th, 2014

    Thanks to you for this useful sample. Good works.

Leave a comment