disign.it | Un semplice menu animato con jquery | a digital sign for a best design!

Css tips & tricks

Un semplice menu animato con jquery

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()...