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
Download jQuery sliding menuso you can check it out for yourself.
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”);
});
});
If you liked this you might want to buy me a coffee :)
![[del.icio.us]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/digg.png)
![[Facebook]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/facebook.png)
![[Google]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/google.png)
![[LinkedIn]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/linkedin.png)
![[MySpace]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/myspace.png)
![[Reddit]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/reddit.png)
![[StumbleUpon]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/technorati.png)
![[Twitter]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/twitter.png)
![[Yahoo!]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/yahoo.png)
![[Email]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/email.png)
Posted on Monday, July 20th, 2009 in .
RSS 2.0 feed for comments.
[...] jQuery sliding menu revisited [...]
July 21st, 2009 at 1:08 am
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
July 22nd, 2009 at 4:57 am
[...] http://www.ilovecolors.com.ar/jquery-sliding-menu/ [...]
July 22nd, 2009 at 7:32 am
Branden: the green text? perhaps you could post a screenshot, including the browser you’re using? thanks
July 22nd, 2009 at 5:32 pm
That`s perfect , great work
July 23rd, 2009 at 2:13 pm
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.
July 28th, 2009 at 9:52 pm
JMCG thanks, I completely overlooked that issue. I’ve added it to the example, the code on the post and the downloaded file.
July 29th, 2009 at 7:46 pm
Thanks for the tutorial. I’ve bookmarked and tweeted it.
August 2nd, 2009 at 3:19 pm
[...] ilovecolors] [...]
August 3rd, 2009 at 7:50 am
jQuery sliding menu revisited…
A new improved sliding menu based on our favourite JavaScript library, jQuery….
August 6th, 2009 at 5:01 pm
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.
August 27th, 2009 at 3:23 am
It works fine not only with the standard page widget but also with the Flexi Pages Widget.
Nice work – Thank You!
August 27th, 2009 at 4:42 am
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?
August 29th, 2009 at 4:11 am
Thank you so much – I really appreciate your efforts!! Will look forward to learning more
August 29th, 2009 at 4:48 am
[...] jQuery sliding menu revisited [...]
September 1st, 2009 at 7:01 pm
[...] jQuery sliding menu revisited [...]
October 9th, 2009 at 9:09 am
[...] Tabbed menu (via Queness) jQuery Sliding Menu (via I Love Colors) Slick Animated Navigation (via Net Tuts+) Superfish Navigation Vimeo Style [...]
November 6th, 2009 at 2:20 am
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??
November 13th, 2009 at 5:13 am
Why preload images with JS when you can use image sprites? This reduces the use of HTTP Requests and speeds up loading.
December 16th, 2009 at 12:34 pm
[...] the articles about some interface elements tutorials using the jQuery library, like rotating tabs, sliding menus or rollovers and [...]
January 28th, 2010 at 2:28 pm
You can make a wonderful menu. Thank you for the lesson man.
March 2nd, 2010 at 1:56 pm
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 ?
March 4th, 2010 at 8:58 am