hello everyone,
i found quite interesting the spritemenu (http://
www.distinctcorp.com.au/jquery/spritemenu.html) idea and used it on my
website. It works quite fine, but i'd like to ad some functionality:
when the user click on a menu element, i want it to remain selected
(in hover state completed). So, here's the function:
<code>
(function($){
$.fn.spritemenu = function(settings) {
var settings = $.extend({}, $.fn.spritemenu.defaults, settings);
return this.each(function() {
var aniParamsOrig = {};
var aniParamsBack = {};
$(this).children(settings.buttonselector).each(function(index) {
var $mainlink = $(this).children('a');
$mainlink.parent().children('ul').css('opacity',0).hide();
$mainlink
.css('display','block')
.css('position','relative')
.css('width',settings.buttonwidth)
.css('height',settings.buttonheight)
.css('background-image','url('+settings.grid+')')
.css('background-repeat','no-repeat')
.css('background-position',((0-index) *
settings.buttonwidth)+'px
0px')
.css('z-index',settings.zindex)
.append('<span></span>').children('span')
.css('display','block')
.css('position','absolute')
.css('top',0)
.css('left',0)
.css('width',settings.buttonwidth)
.css('height',settings.buttonheight)
.css('background-image','url('+settings.grid+')')
.css('background-repeat','no-repeat')
.css('background-position',((0-index) *
settings.buttonwidth)+'px
' + (-1*settings.buttonheight) + 'px')
.css('z-index',(settings.zindex+1));
aniParamsOrig[settings.animate] =
$mainlink.children('span').css
(settings.animate);
aniParamsBack[settings.animate] = 0;
$mainlink.children('span').css(settings.animate,0).hide();
}).hover(function () {
$(this).children('a').children('span').stop().show().animate
(aniParamsOrig, {queue: true, duration: settings.speed, easing:
settings.easing, complete: function() {
$(this).parent().parent().children('ul').stop().show().animate
({opacity: 1}, {queue: true, duration: 'slow'});
}});
},
function () {
$(this).children('a').children('span').stop().animate
(aniParamsBack, {queue: true, duration: settings.speed, easing:
settings.easing, complete: function() {
$(this).hide().parent().parent().children('ul').stop().animate
({opacity: 0}, {queue: true, duration: 'slow'}).hide();
}});
}
).click(function(){
/*alert("pop");*/
$(this).parent().children('li').children('a').children('span').stop
().animate(aniParamsBack, {queue: true, duration: settings.speed,
easing: settings.easing});
$(this).children('a').children('span').stop().show().animate
(aniParamsOrig, {queue: true, duration: settings.speed, easing:
settings.easing});
});
});
}
$.fn.spritemenu.defaults = {
grid: 'menugrid.png',
buttonwidth: 100,
buttonheight: 100,
buttonselector: 'li',
zindex: 10,
speed: 'slow',
easing: 'swing',
animate: 'opacity'
};
function abort() {
arguments[0] = 'spritemenu: ' + arguments[0];
throw format.apply(null, arguments);
}
function format(str) {
for (var i = 1; i < arguments.length; i++)
str = str.replace(new RegExp('\\{' + (i-1) + '}', 'g'),
arguments
[i]);
return str;
}
})(jQuery);</code>
My add is relative to the .click section i report here:
<code>
.click(function(){
/*alert("pop");*/
$(this).parent().children('li').children('a').children('span').stop
().animate(aniParamsBack, {queue: true, duration: settings.speed,
easing: settings.easing});
$(this).children('a').children('span').stop().show().animate
(aniParamsOrig, {queue: true, duration: settings.speed, easing:
settings.easing});
});
</code>
and i get a weird behavior: when i use the alert, it works exactly as
i'd like it to: the animation completes fine and the element remains
in hover state. When i remove the alert, nothing happens and when the
mouse leaves the item after the click, it comes back to the original
state.
can anyone help me, please?
thanks a lot,
joey
