Tutorial Jquery: Creare Un Menu Elastico Con Delle Immagini
Dopo tanto tempo su Fedeweb ritornano i tutorial su jquery, dove in passato abbiamo visto come realizzare degli slideshow di immagini, realizzare degli effetti di hover animati, delle alternative a lightbox ecc.
Oggi vedremo come realizzare un menu molto particolare, dove al passaggio del mouse l’immagine si ingrandirà con un effetto ad elastico.
Ora vedrai come si ottiene questo effetto, in 5 minuti!
HTML
Tutto quello che dovrai fare nei link è semplicemente aggiungere l’attributo class=”menuitem”, il resto è il solito codice HTML dove in un div vengono inseriti i link di cui si ha bisogno.
<div id="menuwrapper">
<div id="menu">
<a href="http://www.fedeweb.net/2009/07/20/fotomontaggio-con-gimp/" class="menuitem"><img src="1.jpg"></a>
<a href="http://www.fedeweb.net/2009/08/05/bianco-e-nero-parziale- con-gimp/" class="menuitem"><img src="2.jpg"></a>
<a href="http://www.fedeweb.net/2009/08/11/creare-fantastici-slideshow-in-5-minuti/" class="menuitem"><img src="3.jpg"></a>
<a href="http://www.fedeweb.net/2009/09/21/i-migliori-tutorial-in-italiano-per-photoshop/" class="menuitem"><img src="4.jpg"></a>
<a href="http://www.fedeweb.net/2009/09/14/le-migliori-applicazioni-per-pc-e-mac/" class="menuitem"><img src="5.jpg"></a>
</div>
</div>
CSS
Per ottenere l’effetto di aumentare le dimensioni delle immagini verso l’alto, dobbiamo utilizzare la proprietà position:fixed da attribuire a .menuitem.
#menuwrapper{ position:relative; height:210px;}
#menu{position:absolute; bottom:0; left:0;}
.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }
jQuery
Ora dovremo innanzitutto impostare le dimensioni di tutte le immagini a 100px e poi impostare i comportamenti dei link al passaggio del mouse (mouseover), e quando il mouse non è più sopra l’immagine (mouseout).
$(document).ready(function(){
$('.menuitem img').animate({width: 100}, 0);
$('.menuitem').mouseover(function(){
gridimage = $(this).find('img');
gridimage.stop().animate({width: 200}, 150);
}).mouseout(function(){
gridimage.stop().animate({width: 100}, 150);
});
});
Cosa ti avevo detto? Un bell’effetto ottenuto in poco tempo! Meglio di così!
Fonte: build Internet
5 Commenti
Grazie!!! Lo provo sicuramente… i tutorial su jquery che hai pubblicato mi sono stati di grande aiuto, soprattutto gli slideshow di immagini, anzi… se ne pubblicassi di nuovi saresti un grande!!!
Ciao Barbara! Sono contento di esserti stato d’aiuto e ho proprio in programma nelle prossime settimane altri tutorial su jquery! 😉
Ciao Federico. Ottimo tutorial. Volevo chiederti, come posso aggiungere uno sfondo ? Ho provato mettendo , ma senza successo. Hai dritte da darmi. Grazie e complimenti
Ok, avevo fatto un piccolo errore. Va tutto bene. Ciao
Ottimo se hai bisogno chiedimi pure 😉