jQuery

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.

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=”” />
Change your password
</a></li>
<li><a href=”http://feeds.feedburner.com/ilovecolors” target=”_blank” rel=”noopener”>
<img src=”rss.gif” alt=”” />
Suscribe to our RSS!
</a></li>
<li><a href=”#”>
<img src=”sel.gif” alt=”” />
Choose your options!
</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
<ul>
<li>, which is the parent of <a>, parent of <img />, expands its width to 140px.</a>$(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! Also, check our best web design companies rating  see you next time!</li>
</ul>

Leave a Reply

Your email address will not be published.Required fields are marked *