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

L'articolo ti è stato utile? se vuoi ringraziarmi offrimi un caffè, o una pizza se vuoi esagerare!

E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.Se non sai cosa sono, guarda questo video. Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Tutorial Jquery: Gestire Grandi Menu Drop Down Con Css e Jquery

A volte può capitare di dover realizzare siti costituiti da molte pagine, con la conseguente difficoltà nel realizzare un menu di navigazione...

Tutorial Html Jquery: Aggiungere Dei Pulsanti Incrementali (+/-) Nei Form

Quando si progetta un sito internet bisogna curare tutti i dettagli, anche quelli che ci sembrano più insignificanti. Nel tutorial CSS-Tricks...

Animare le immagini di sfondo con javascript

In questo articolo vedremo una delle innumerevoli applicazioni della libreria jquery, l'animazione delle immagini di sfondo nei menu. L'esempio è...