Spritemenu e jquery

[joey.santiago]

Spritemenu e jquery

Ciao a tutti,

recentemente ho scoperto questo interessante plugin per jquery per creare in pochi istanti un menu con effetto rollover usando una sola immagine: distinctcorp.com.au/jquery/spritemenu.html.
Ora però mi rendo conto che dovrei modificare il codice per poter ottenere un effetto in più: vorrei che al click del mouse su uno degli elementi del menu, questo rimanesse selezionato.
Ho dato testate al muro per qualche ora e sono arrivato ad un risultato assurdo: inserendo un alert javascript prima del codice che "completa" l'animazione dell'elemento, tutto funziona a meraviglia, ma appena tolgo l'alert (e naturalmente non lo voglio...), non funziona!
Ecco il codice javascript:

$(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("opo");
                /*$(this).parent().children('li').children('a').children('span').stop().hide();*/
                $(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'});
                }});
            });
```la mia aggiunta è relativa alla parte del click...

Sono certo qualcuno mi saprà aiutare... Grazie mille! :)