-
2032 readers
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.
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”);
});
});
![[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)
![[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 .
[...] jQuery sliding menu revisited [...]
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
[...] http://www.ilovecolors.com.ar/jquery-sliding-menu/ [...]
Branden: the green text? perhaps you could post a screenshot, including the browser you’re using? thanks
That`s perfect , great work
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.
JMCG thanks, I completely overlooked that issue. I’ve added it to the example, the code on the post and the downloaded file.
Thanks for the tutorial. I’ve bookmarked and tweeted it.
[...] ilovecolors] [...]
jQuery sliding menu revisited…
A new improved sliding menu based on our favourite JavaScript library, jQuery….
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.
It works fine not only with the standard page widget but also with the Flexi Pages Widget.
Nice work – Thank You!
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?
Thank you so much – I really appreciate your efforts!! Will look forward to learning more
[...] jQuery sliding menu revisited [...]
[...] jQuery sliding menu revisited [...]
[...] Tabbed menu (via Queness) jQuery Sliding Menu (via I Love Colors) Slick Animated Navigation (via Net Tuts+) Superfish Navigation Vimeo Style [...]
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??
Why preload images with JS when you can use image sprites? This reduces the use of HTTP Requests and speeds up loading.
[...] the articles about some interface elements tutorials using the jQuery library, like rotating tabs, sliding menus or rollovers and [...]
You can make a wonderful menu. Thank you for the lesson man.
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 ?
is there a way to have the effect sliding to the left, instead of right ?
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
nice widget… i will try in my web
Thanks for the code. Very useful! But, how can i nest a submenu inside the span?
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
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.
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.
That would be great Criss!
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.
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=
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
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!
[...] А с помощью jQuery пришлось бы писать как-то так. [...]
nice post but it’ll be better using css3) as for me
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!!!