No this is not flash. It is 100% jQuery! This menu is one of the best jQuery menus I have found and this is how you implement it for your own website!
- The html is a simple unordered list
- The css can be customised to colours to match your website
- The jQuery can be customised to the speeds and effects you require
The following goes into the JavaScript file:
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})($);
$('#mynav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:700})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:700, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})($);
$('#mynav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:700})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:700, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
The following goes into the HTML:
<ul id="mynav">
<li class="active"><a class="active" href="http://blogoola.com/">Home</a></li>
<li ><a href="http://blogoola.com/find-blogs/">Find Blogs</a></li>
<li ><a href="http://blogoola.com/my-blogs/">My Blogs</a></li>
<li ><a href="http://blogoola.com/about/">About</a></li>
<li ><a href="http://blogoola.com/faq/">Faq</a></li>
</ul>
<li class="active"><a class="active" href="http://blogoola.com/">Home</a></li>
<li ><a href="http://blogoola.com/find-blogs/">Find Blogs</a></li>
<li ><a href="http://blogoola.com/my-blogs/">My Blogs</a></li>
<li ><a href="http://blogoola.com/about/">About</a></li>
<li ><a href="http://blogoola.com/faq/">Faq</a></li>
</ul>
These are the two background images which the jQuery uses to animate the menu items (you can change the colours to suit your website, switch between to get different hover effects).
Pingback: My jQuery Blog | The Coding Magician
Pingback: 15 Great jQuery Navigation Menu Plugins | jQuery4u