jQuery Slick Animated Menu Tutorial

4/03/2013

How to create a slick animated drop down ribbon effect with jquery.

HTML

<ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">ABOUT</a></li>
   <li><a href="#">TIMES</a></li>
   <li><a href="#">TARTS</a></li>
</ul>

CSS

ul {
width:700px;
text-align:center;
overflow:hidden;
border-top:1px solid #000;
}
ul li {
float:left;
list-style:none;
}
ul a {
display:block;
width:97px;
height:77px;
padding:72px 0 0 0;
margin:0 32px 0 32px;
font:bold 16px Arial;
color:#000;
text-decoration:none;
}
ul a:hover {
background:url(../images/pink.png) 0 0 no-repeat;
color:#fff;
text-shadow:1px 1px 2px #333;
}

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

jQuery Plugin

(function(b){if(!document.defaultView||!document.defaultView.getComputedStyle){var d=jQuery.curCSS;jQuery.curCSS=function(g,e,h){if(e==="background-position"){e="backgroundPosition"}if(e!=="backgroundPosition"||!g.currentStyle||g.currentStyle[e]){return d.apply(this,arguments)}var f=g.style;if(!h&&f&&f[e]){return f[e]}return d(g,"backgroundPositionX",h)+" "+d(g,"backgroundPositionY",h)}}var c=b.fn.animate;b.fn.animate=function(e){if("background-position" in e){e.backgroundPosition=e["background-position"];delete e["background-position"]}if("backgroundPosition" in e){e.backgroundPosition="("+e.backgroundPosition}return c.apply(this,arguments)};function a(f){f=f.replace(/left|top/g,"0px");f=f.replace(/right|bottom/g,"100%");f=f.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var e=f.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(e[1],10),e[2],parseFloat(e[3],10),e[4]]}b.fx.step.backgroundPosition=function(f){if(!f.bgPosReady){var h=b.curCSS(f.elem,"backgroundPosition");if(!h){h="0px 0px"}h=a(h);f.start=[h[0],h[2]];var e=a(f.options.curAnim.backgroundPosition);f.end=[e[0],e[2]];f.unit=[e[1],e[3]];f.bgPosReady=true}var g=[];g[0]=((f.end[0]-f.start[0])*f.pos)+f.start[0]+f.unit[0];g[1]=((f.end[1]-f.start[1])*f.pos)+f.start[1]+f.unit[1];f.elem.style.backgroundPosition=g[0]+" "+g[1]}})(jQuery);

// Fire Plugin
$(function(){$("ul a").addClass("js");$("ul a").hover(function(){$(this).stop(true,true).animate({backgroundPosition:"(0 0)"},200);$(this).animate({backgroundPosition:"(0 -5px)"},150);},function(){$(this).animate({backgroundPosition:"(0 -149px)"},200);});});

ADVERTISE HERE