• User Attivo

    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! :)