Tutorial Jquery: Creare Un Menu Elastico Con Delle Immagini

Scritto da fedeweb il 23 settembre 2009 con 5 Commenti | Pubblicato in Plugin jQuery, Tutorial 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

Template con navigazione orizzontale animata, realizzato in HTML, CSS e jQuery

437 download

711 download

About fedeweb

Federico Pian è un web designer freelance e insegnante , che ama condividere le proprie conoscenze e rendere tutti partecipi della sua passione. Guarda il suo portfolio e cosa sa fare nei tutorial. Scopri più informazioni su di lui nella pagina mi presento.

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

    • Ok, avevo fatto un piccolo errore. Va tutto bene. Ciao

      • Ottimo se hai bisogno chiedimi pure ;)

Lascia un commento