- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Spritemenu e jquery
-
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! :)