Tutorial Jquery: Creare Un Menu Elastico Con Delle Immagini

• Tweet

• Tweet

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ì!

Scarica il sorgente

Guarda l’esempio

Fonte: build Internet