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.
[html]
<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>
[/html]
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.
[css]
#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;
}
[/css]
Script
The Javascript code for this slide menu adds the image preloading even before the document is ready.
[js]
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");
[/js]
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.
[js]
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");
});
});
[/js]
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”);
});
});
how can i make it vertical? i tried a lot but while hovring over any LI, all the LIs expand…
Thanks the author, this information to me has very much helped)
main i love your design
[…] tutorial assumes that you have a basic knowledge of jquery. Web Site Demo Download LikeBe the first to like this […]
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 ?
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…
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??
I forgot to mention in my post above that this problem only happens in Firefox. Works perfectly in IE.
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.
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
Very nice effect and the code is pretty clean. I like this!
Please change the link for lazydreamer site its lazydreamer.co.cc
[…] Tutorial e Download […]
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?
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.
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
like i said in the previous comment, you’ll have to edit the script too to reflect the change in your image naming.
Apologies, a ctrl R on the site and it works like a charm now. You are a genius.! 🙂
[…] jQuery Sliding Menu […]
[…] А с помощью jQuery пришлось бы писать как-то так. […]
Muito Obrigado pelo codigo!
Ajudou muito!
o/
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.
[…] the articles about some interface elements tutorials using the jQuery library, like rotating tabs, sliding menus or rollovers and […]
[…] А с помощью jQuery пришлось бы писать как-то так. […]