Fw

Wordpress Creative Developer

Tutorial Jquery: Creare Un Menu Elastico Con Delle Immagini

  • Plugin jQuery
  • -

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.

menujquery

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

5 commenti

  1. 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!!!

  2. Ciao Barbara! Sono contento di esserti stato d’aiuto e ho proprio in programma nelle prossime settimane altri tutorial su jquery! ;)

  3. Ciao Federico. Ottimo tutorial. Volevo chiederti, come posso aggiungere uno sfondo ? Ho provato mettendo , ma senza successo. Hai dritte da darmi. Grazie e complimenti

Scrivi un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *