disign.it | Un semplice menu animato con jquery | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 3.403 visualizzazioni

Un semplice menu animato con jquery

07/09/2011

Tra le mille risorse di jquery ho trovato un semlicissimo menù con effetto rollover di entrata animata dello sfondo.
Si tratta di uno script leggerissimo e di facile personalizzazione.
L'esempio lo potete vedere in azione qui.
L'esempio è composto da tre file, un html in cui è scritto anche il CSS, l'elemento grafico png, e un jscript esterno.

Il menu è costruito con la classica lista modificata via CSS in cui ogni elemento viene trattato come blocco e definito quindi nelle sue dimensioni.
La particolarità di cui tener conto è l'impostazione dell'elemento gafico di sfondo del pulsante, al caricamento della pagina nascosto attraverso il posizionamento Y settato con un valore negativo leggermente superiore all'altezza dell'elemento grafico stesso.
Lo stato over prevede invece il posizionamento dell'elemento grafico di sfondo in modo visibile riportando Y a 0.
Fin qui avremo un semplice classico effetto roll over.
Inseriamo quindi una nuova regola CSS necessaria jquery per rilevare il punto di partenza della piccola animazione
ul#nav li a.js:hover

Per terminare la nostra sezione head includiamo jquery dalla libreria Ajax di Google e includiamo il js animate-bg.js  necessario all'animazione.

Ora non rimane che avviare la funzione jquery con i classico
$(document).ready(function()...

← Php sleep Free ItaliaWiFI →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.