Allground - Responsive Fullscreen Backgrounds for WordPress with images, YouTube videos, Google Maps and self hosted videos

jQuery sliding menu revisited

jQuery Sliding Menu Revisited

A few months ago I posted a sliding menu using jQuery and some users asked for a few changes in it: the ability to preload images and making the entire block clickable. So here it is, check the example, a new improved sliding menu based on our favourite JavaScript library, jQuery.

The markup

It will not be different from the previous one, and all the changes will be made in the script and the css style.


<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, it’s a simple list with an img and a span tag nested inside an anchor. In the first moment, the span is hidden due to the anchor width.  When mouse rolls over the anchor, we will expand its width to reveal the span.

Style

In order for the span to appear next to the icon, we will position it absolutely. To do so, we will add relative positioning to the li item. We will give the anchor a width of 24px, which is the width of our icon and then a bit of padding to give it some fresh air.

#iconbar li {
float:left;
position:relative;
overflow: hidden;
margin-right:20px;
background:#E8E8F9;
border: 1px dashed #ffc0ff;
}
#iconbar a {
text-decoration: none;
outline: none;
color:#d00000;
display: block;
width: 24px;
padding: 10px;
cursor:pointer;
}
#iconbar span {
width: 100px;
height: 35px;
position: absolute;
display: none;
line-height:110%;
color:#409BED;
padding-left: 10px;
}

Script

The Javascript code for this slide menu adds the image preloading even before the document is ready.

jQuery.preloadImages = function()
{
 for(var i = 0; i<arguments.length; i++)
 jQuery("<img>").attr("src", arguments[i]);
}
jQuery.preloadImages("key.gif", "keyo.gif", "rss.gif", "rsso.gif", "sel.gif", "selo.gif");

When the document is ready, we attach the hover function to the anchors on the list. When mouse is over an anchor, it will expand its width up to 140px, wide enough to reveal the span and the icon is replaced by the one having its name ending in “o.gif”. In the previous example the original image name was splitted at “.” but this could arise to some issues if the image was being taken from a parent directory like “../image.gif”. In that case the split was performed at the two points.


jQuery(document).ready(function(){

$("#iconbar li a").hover(
function(){
var iconName = $(this).children("img").attr("src");
var origen = iconName.split(".gif")[0];
$(this).children("img").attr({src: "" + origen + "o.gif"});
$(this).animate({ width: "140px" }, {queue:false, duration:"normal"} );
$(this).children("span").animate({opacity: "show"}, "fast");
},
function(){
var iconName = $(this).children("img").attr("src");
var origen = iconName.split("o.")[0];
$(this).children("img").attr({src: "" + origen + ".gif"});
$(this).animate({ width: "24px" }, {queue:false, duration:"normal"} );
$(this).children("span").animate({opacity: "hide"}, "fast");
});
});

You might have noticed that I added a cursor: pointer style to the anchor. Why is that? because in IE6 and 7 when the anchor is expanded, if the mouse is in the new area that wasn’t previously considered within the boundaries of the anchor, the cursor reverts to text cursor.

That’s all we need to finish our sliding menu. Here’s the source file

so you can check it out for yourself.

jQuery(document).ready(function(){$(“#iconbar li a”).hover(
function(){
var iconName = $(this).children(“img”).attr(“src”);
var origen = iconName.split(“.gif”)[0];
$(this).children(“img”).attr({src: “” + origen + “o.gif”});
$(this).css(“cursor”, “pointer”);
$(this).animate({ width: “140px” }, {queue:false, duration:”normal”} );
$(this).children(“span”).animate({opacity: “show”}, “fast”);
},
function(){
var iconName = $(this).children(“img”).attr(“src”);
var origen = iconName.split(“o.”)[0];
$(this).children(“img”).attr({src: “” + origen + “.gif”});
$(this).animate({ width: “24px” }, {queue:false, duration:”normal”} );
$(this).children(“span”).animate({opacity: “hide”}, “fast”);
});
});


“jQuery sliding menu revisited” received 80 comments! Add yours.

  1. 60+ Must Have jQuery Toolbox | tripwire magazine July 21st, 2009

    [...] jQuery sliding menu revisited [...]

  2. Branden July 22nd, 2009

    Looks great except the green text shows up before it’s fully loaded (slid out) which is a bit of a cosmetic issue for me.

    Bookmarked for sure though :)

  3. マウスオーバーで、メニューがスライドするライブラリー。sliding menu | memo-memo July 22nd, 2009

    [...] http://www.ilovecolors.com.ar/jquery-sliding-menu/ [...]

  4. Elio July 22nd, 2009

    Branden: the green text? perhaps you could post a screenshot, including the browser you’re using? thanks

  5. gaga July 23rd, 2009

    That`s perfect , great work

  6. JMcG July 28th, 2009

    Very nice. You can add overflow:hidden to
    #iconbar li{ } if you want to avoid the text showing over the edge of the block while expanding.

  7. Elliot July 29th, 2009

    JMCG thanks, I completely overlooked that issue. I’ve added it to the example, the code on the post and the downloaded file.

  8. Silver Firefly August 2nd, 2009

    Thanks for the tutorial. I’ve bookmarked and tweeted it.

  9. 简单的Jquery横向滑动菜单 | 鸭脖客 August 3rd, 2009

    [...] ilovecolors] [...]

  10. You are now listed on FAQPAL August 6th, 2009

    jQuery sliding menu revisited…

    A new improved sliding menu based on our favourite JavaScript library, jQuery….

  11. Carolyn August 27th, 2009

    First of all, I LOVE the all the illustrations & textures on your site! I also love the sliding menu effect & this is a great tutorial. Is it possible to have more than 1 sliding menu on a single page? (I really hope so!)

    I have a similar-looking JQuery menu currently working (based on a different tutorial I found a couple of days ago), but I don’t know how to code the combination hover function so that two menus will work. I’ve been struggling with this for hours! Any tips are much appreciated! Thank you.

  12. Bjorn Granberg August 27th, 2009

    It works fine not only with the standard page widget but also with the Flexi Pages Widget.
    Nice work – Thank You!

  13. Elliot August 29th, 2009

    Carolyn, thanks for your idea. I will write soon a new tutorial to apply this menu several times in a page.
    Bjorn, are you talking about the Pages widget folding menu?

  14. Carolyn August 29th, 2009

    Thank you so much – I really appreciate your efforts!! Will look forward to learning more :)

  15. 95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets | tripwire magazine September 1st, 2009

    [...] jQuery sliding menu revisited [...]

  16. 95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets « Photoshop.vn – Your Design Resource October 9th, 2009

    [...] jQuery sliding menu revisited [...]

  17. jQuery Week: Navigation Inspiration & 9 tutorials - Purpleurbia.com November 6th, 2009

    [...] Tabbed menu (via Queness) jQuery Sliding Menu (via I Love Colors) Slick Animated Navigation (via Net Tuts+) Superfish Navigation Vimeo Style [...]

  18. Jamal Jomaa November 13th, 2009

    Hi there,

    I have been trying for the past couple of hours to get this working for me. Originally, i changed the images to my own… and everything worked fine except the buttons wouldnt slide… so then i tried putting the images you used in.. still nothing. Then i downloaded the ZIP file, and didnt change anything except the links of the icons to my links… and still nothing. Then I tried keeping everything exactly the same, and it still didnt work! I checked to make sure my java was enabled… and it was… do you know what could be wrong??

  19. Blivox December 16th, 2009

    Why preload images with JS when you can use image sprites? This reduces the use of HTTP Requests and speeds up loading.

  20. Behind the Scenes at Vibrant and Inspiring Design Blog ilovecolors | Inside the Webb January 28th, 2010

    [...] the articles about some interface elements tutorials using the jQuery library, like rotating tabs, sliding menus or rollovers and [...]

  21. Webchester March 2nd, 2010

    You can make a wonderful menu. Thank you for the lesson man.

  22. Berkil March 4th, 2010

    Thanks very much, this is a great app and it’s perfect for my purposes, except one small thing. Would it be possible to make the slider slide from right too left instead(flip the action) and if so how ?

  23. Criss March 21st, 2010

    is there a way to have the effect sliding to the left, instead of right ?

  24. Criss March 21st, 2010

    how can I replace the icons ending in o.gif with other images? What should I change in the general.js script?

    Sorry but I’m not an expert programmer.
    Criss

  25. julian March 23rd, 2010

    nice widget… i will try in my web

  26. memphis March 23rd, 2010

    Thanks for the code. Very useful! But, how can i nest a submenu inside the span?

  27. Criss April 11th, 2010

    I have 2 queries.
    1) Is it really necessary to add the “image preload” code line to the beginnign of the javascript? I have noticed that the script works fine even if that line is deleted.
    2) please tell me how to slide the text of the icon to the right

    cheers

  28. Elio April 12th, 2010

    Criss, the preload line is neccesary so that no blank spots appears due to the browser loading an image. I could have created the effect using a sprite, but I wanted to show how to preload images using jQuery.
    To slide it to the right you might have to use a different approach with absolute positioning, setting right fixed, and moving the block to the left. Finally, regarding the question you sent me by email, borrar.css is just a reset stylesheet.

  29. Criss April 13th, 2010

    Elio, thank you very much for your attention and explanations. I’m not an expert programmer but I’ll figure out how to slide to the opposite direction and will post it here for the community to know. Cheers.

  30. Elio April 14th, 2010

    That would be great Criss!

  31. Cross April 19th, 2010

    ok, with a little help from a friend I have been able to have the slide to the left.
    Just modify “left” to “right” in the the line:
    #iconbar {position:absolute; top:25%; right:45%; text-shadow:0 1px 0 #eee;}

    Be aware that this only slides the entire block. The goal is also to have the icon description at the left side of the icon. Any help? I’ll keep testing.

  32. Criss April 19th, 2010

    ok, if you add #iconbar img {float:right;} to the CSS, the description will slide to the left. The only problem is that the padding is too wide. Can anyone help telling me how to reduce it=

  33. Criss April 27th, 2010

    It’s final! To reduce the right padding add text-align:right to #iconbar in CSS, and then fiddle with the widths in #iconbar span and $(this).animate({ width: “140px” }.
    Cheers

  34. Elio April 28th, 2010

    hey! thanks for sharing this. I will put it together later to test it and publish it giving you the well deserved credit :) thanks for sharing!

  35. CSS3-анимация вместо эффектов jQuery | rotorweb.ru | Проблемы и решения в Web-дизайне May 19th, 2010

    [...] А с помощью jQuery пришлось бы писать как-то так. [...]

  36. seokomail July 12th, 2010

    nice post but it’ll be better using css3) as for me

  37. Dimitris September 2nd, 2010

    Thanks for this great widget! I am trying to add it in a project of mine.. what I have noticed is that it seems to freeze for a little while the page loads.. is it because of the use of jQuery(document).ready(function()? Is there any way to prevent it from slowing down the whole page loading? Thanx!!!

  38. Elio September 3rd, 2010

    Dimitris, do you mean that the rollovers are freezed while it’s loading, or the whole page is freezed? If it’s the first case, maybe you could hide them from the stylesheet and show them on document.ready. Otherwise you might want to move your tags to the bottom of the page. The script won’t freeze the page any more than any other tag that you add.

  39. Dimitris September 3rd, 2010

    Thanks for the reply Elio! I’m not sure what happens… the page loads but the rollovers don’t work for a while.. it seems like the page waits for the menu to load and then suddenly it works perfectly! How can I hide them from the stylesheet? I tried
    #iconbar a:hover{
    display:none}
    but didn’t work… am I doing something wrong?

  40. Dimitris September 3rd, 2010

    OK, it seems to be a hosting server issue eventually! Locally (apache) the page loads perfectly, when I upload it on the server (windows server) the page has the issues I mentioned… I tried on a second server (apache, not local) and the page loads perfectly again! So I guess I have to either change hosting server. or stay with what I get…

  41. Elio September 3rd, 2010

    Well that is indeed weird. By hiding the menu, I meant that you could add a layer on top of the entire area of the sliding menu and remove it only when the document is ready, like this:

    jQuery(document).ready(function(){
    jQuery(".hidinglayer").hide();
    });

    In this way, the layer will be hidden once the document is ready. You could add a “Loading…” text or something.
    However, it’s a very weird behaviour and it would be better to solve the core issue.

  42. 15 Fresh JavaScript Tutorials For Web Developers - Ntt.cc September 3rd, 2010

    [...] Create a Sliding Menu Using jQuery [...]

  43. Dimitris September 3rd, 2010

    If it is indeed a hosting server problem I don’t think there is much I can do! Thanks for the interest anyway mate! ;-)

  44. Casper September 14th, 2010

    How about submenues?

  45. Elio September 14th, 2010

    In the same way than the menu expands to the right when the mouse is over, you could expand your submenu towards the bottom of each parent menu item.

  46. Casper September 15th, 2010

    I luv it… thanks elio

  47. 25 Menu Espetaculares Com jQuery | Webmaster.pt - Marketocracia Digital September 17th, 2010

    [...] Tutorial e Download [...]

  48. emepunto November 1st, 2010

    ¡Hola!
    La verdad es que me encanta este efecto, y me gustaría poder incluirlo en mi blog (blogger) para sustituir el diseño de las tabs de la plantilla.
    He tratado de hacerlo, pero no sé donde hay que incluir cada parte del código, en qué situación del código css de la plantilla.
    ¿Podrías hacernos un breve tutorial para novatos, sobre cómo poder poner este tipo de efectos en los tabs?
    ¡Gracias!

  49. jQuery the tool for better websites | Lazy Dreamer November 2nd, 2010

    [...] jQuery sliding menu revisited [...]

  50. Harald Halvorsen November 5th, 2010

    Hello, and thanks for a great tutorial!
    I am just about new to everything other than html, but I’ve managed to implement this script to my wordpress-driven blog, but I have one problem:
    The whole animation thing works just perfect the first time I hover them. However – if I hover – the move the cursor outside the box so the animation “goes back to normal” and then hover again, my span-text goes offset, and displays under the icon instead. Take a look here: http://departementet.org/v1/2010/11/04/vi-tar-ansvaret/ if you don’t understand my poor english. (It’s the FB, Twitter and RSS icons just before the comments)

    Again, thank you for this great script!

  51. Elio November 9th, 2010

    Harald, for some strange reason, the first time your item is hovered, the span is set to display:inline, which is correct (you can check it on the example here), but then, the span is set to display:block, thus causing the span dropping to the next line. The code is identical so it should work. Maybe some other style that you have might be in conflict? jQuery versions?
    Maybe you could do the following in the script: replace the first occurrence of “fast”, within the first function for the hover() event with:

    { duration: "fast", complete: function(){ jQuery(this).attr( {"style": "display:inline" } ) }

    This will create a new function to be executed when the animation to display the label is finished. That function will force the span display to inline.

  52. Harald Halvorsen November 9th, 2010

    Don’t work on my site. (Unless I am missunderstanding something, that is). I replaced this:
    function(){
    var iconName = jQuery(this).children("img").attr("src");
    var origen = iconName.split(".png")[0];
    jQuery(this).children("img").attr({src: "" + origen + "h.png"});
    jQuery(this).css("cursor", "pointer");
    jQuery(this).animate({ width: "145px" }, {queue:false, duration:"fast"} );
    jQuery(this).children("span").animate({opacity: "show"}, "fast");
    },

    with this:
    function(){
    var iconName = jQuery(this).children("img").attr("src");
    var origen = iconName.split(".png")[0];
    jQuery(this).children("img").attr({src: "" + origen + "h.png"});
    jQuery(this).css("cursor", "pointer");
    jQuery(this).animate({ width: "145px" }, {queue:false, duration:"fast" complete: function(){ jQuery(this).attr( {"style": "display:inline" } ) }} );
    jQuery(this).children("span").animate({opacity: "show"}, "fast");
    },

    - is that what you ment?
    All that results in is that there is no animation at all.

    And also, I am not using any other jQuery on the site. And the version I am using is v.1.4.3

  53. Elio November 9th, 2010

    Harald, replace the first occurrence. In the code you pasted above, check line 11, that says

    "show"}, "fast");

    Replace the fast that appears there with the code I gave you in my previous comment. Leave the rest as it was before :D

  54. Harald Halvorsen November 9th, 2010

    Sorry, still nothing. I am new to jQuery and all, so I tried “everything” hehe – I tried replacing:

    fast
    “fast”
    , “fast”
    , “fast”)
    “fast”)
    …and nothing worked :(

  55. Elio November 9th, 2010

    no prob buddy, try this

    jQuery.preloadImages = function()

    {

    for(var i = 0; i<arguments.length; i++)

    jQuery("").attr("src", arguments[i]);

    }

    jQuery.preloadImages("key.gif", "keyo.gif", "rss.gif", "rsso.gif", "sel.gif", "selo.gif");

    jQuery(document).ready(function(){

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

    function(){

    var iconName = $(this).children("img").attr("src");

    var origen = iconName.split(".gif")[0];

    $(this).children("img").attr({src: "" + origen + "o.gif"});

    $(this).css("cursor", "pointer");

    $(this).animate({ width: "140px" }, {queue:false, duration:"normal"} );

    $(this).children("span").animate({opacity: "show"}, { duration: "fast", complete: function(){ jQuery(this).attr( {"style": "display:inline" } ) });

    },

    function(){

    var iconName = $(this).children("img").attr("src");

    var origen = iconName.split("o.")[0];

    $(this).children("img").attr({src: "" + origen + ".gif"});

    $(this).animate({ width: "24px" }, {queue:false, duration:"normal"} );

    $(this).children("span").animate({opacity: "hide"}, "fast");

    });

    });

    it should work :D

  56. Harald Halvorsen November 9th, 2010

    Nope :(
    I REALLY appreciate your help, but it just don’t seem to work for me, hehe. I copied your script right from the reply here now, only changing the imagenames (and .gif to .png) but it still won’t work. No animation what so ever :(
    But don’t worry – please don’t waste anymore time on support, hehe, I’ll figure out something else :)

  57. ndr December 3rd, 2010

    how can i make it vertical? i tried a lot but while hovring over any LI, all the LIs expand…

  58. antija January 10th, 2011

    Thanks the author, this information to me has very much helped)

  59. r-benTahir January 18th, 2011

    main i love your design

  60. jQuery Tutorial – Create a Sliding Menu Using jQuery « February 10th, 2011

    [...] tutorial assumes that you have a basic knowledge of jquery. Web Site Demo Download LikeBe the first to like this [...]

  61. Laiton March 2nd, 2011

    This is a lovely tutorial. Im using it for my website flash and would want the first span to be expanded by default. Any one know hw ?

  62. ali April 3rd, 2011

    hi
    i have the same problem please help us:
    how can i make it vertical? i tried a lot but while hovring over any LI, all the LIs expand…

  63. Mike April 7th, 2011

    I have the same issue as Harald Halvorsen where the text is dropping down. I have narrowed it down to the jquery.min.js i am using. I am linking colorbox with your neato slide menu. Colorbox uses the .min.js and if I try to use the .min with the slide menu I get the text dropping down. If I try to use the jquery.js with colorbox it does not work…. Any suggestions??

  64. Mike April 7th, 2011

    I forgot to mention in my post above that this problem only happens in Firefox. Works perfectly in IE.

  65. Elio April 7th, 2011

    Hi Mike, after your comment, I thought it was an issue with the jQuery version, but I’ve just tested the demo with the jQuery 1.4.4 version bundled with WordPress 3.1 and it works. I did had to replace $( ocurrences by jQuery(because WordPress uses the latter to avoid conflicts with other js libraries, but other than that, it just worked. Regarding Firefox, I’ve tested the demo in FF 3.6 and new FF4.

  66. Mike April 7th, 2011

    Thanks Elio.

    I appreciate you looking into this. I spent hours last night. Like I mentioned I am linking colorbox to your slide menu. The color box pulls up a modal window with an iframe. The Colorbox comes with the .min.js. If I comment out the jquery.min.js (for colorbox) then slide menu works perfect but the colorbox does not work. If I comment out Jquery.js the The slide menu does not work and colorbox works fine. If I have both in then slide menu works the first time you look at it but then if you mouse off and mouse back to it then the text drops below the icon…. but the colorbox works fine. Again this “unique” occurance only happens in Firefox. IE works fine (or ignores what every issue FF is not overlooking.. what ever the case may be :-) )

    Thanks again for your attention to this matter

  67. e11world April 13th, 2011

    Very nice effect and the code is pretty clean. I like this!

  68. Ali Baloch August 4th, 2011

    Please change the link for lazydreamer site its lazydreamer.co.cc

  69. 25 Menus Espetaculares em Jquery : TudoFilme September 3rd, 2011

    [...] Tutorial e Download [...]

  70. Dave January 9th, 2012

    Hi,

    I have a problem with the script in that it does not place back the origional images after hover. It seems that it has some thing to do with the domain.

    When the site loads the image urls are http://www.mydomain.co.za/images/keyo.png
    Once hovered it changes to http://www.mydomain.c.png
    Can you assist in fixing this issues?

  71. Elio January 9th, 2012

    Dave, that is because the images are selectively placed by detecting and/or trimming the “o.” string. That’s why I used names like keyo.gif for the hover state and key.gif for the normal state. Try renaming your hover images to keyh.gif and replacing the occurrences of “o.” with “h.” in the script.

  72. Dave January 9th, 2012

    Thanks,

    I gave the “h. a try and the result is the same. The image in the generated code still remains http://www.mydomain.co.za/c.png

    It seems as though the script is trimming the “.co.za/key” after hover.

    Any ideas?

    Dave

  73. Dave January 9th, 2012

    Apologies, a ctrl R on the site and it works like a charm now. You are a genius.! :)

  74. Elio January 9th, 2012

    like i said in the previous comment, you’ll have to edit the script too to reflect the change in your image naming.

  75. Navigations – Menüs für Websites » Designers-Buexe June 1st, 2012

    [...] jQuery Sliding Menu [...]

  76. CSS3-анимация вместо эффектов jQuery | white wind CSS3-анимация вместо эффектов jQuery | June 9th, 2012

    [...] А с помощью jQuery пришлось бы писать как-то так. [...]

  77. Max Guedes June 13th, 2012

    Muito Obrigado pelo codigo!

    Ajudou muito!

    \o/

  78. Calvin E January 11th, 2013

    Hey, when you hover on and off and on and off repeatedly you get a funny effect. You need to you stop(true, true) or something like that on your text within the buttons to stop the animation backlogging and repeating over and over.

  79. Behind the Scenes at Vibrant and Inspiring Design Blog ilovecolors | Ian Carnaghan March 18th, 2013

    [...] the articles about some interface elements tutorials using the jQuery library, like rotating tabs, sliding menus or rollovers and [...]

  80. CSS3-анимация вместо эффектов jQuery | Просто блог February 19th, 2014

    […] А с помощью jQuery пришлось бы писать как-то так. […]

Leave a comment