LavaLamp – Menu Dinamico con Jquery
23 novembre 2010 
Oggi vi presento un ottimo plugin per Jquery utilissimo per realizzare dei menu dinamici che un effetto spettacolare con poco sforzo. Parlo di LavaLamp realizzato da Ganesh e Guillermo Rauch.
Per vedere il menu in azione basta cliccare qui. Ora vediamo all’atto pratico come ho realizzato questo semplicissimo menu.
Per iniziare ho realizzato la pagina in html , che conterrà il nostro semplice menu composto da il tag <ul> e i tag <li>.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <html> <head> <title>LavaLamp - Menu intelligente in Jquery</title> <script src="js/jquery.min.js"></script> <script src="js/jquery.lavalamp.js"></script> <script src="js/jquery.easing.js"></script> <script type="text/javascript"> $(function() { $(".lavaLamp").lavaLamp( { fx: "backout", speed: 700 })}); </script> <link rel="stylesheet" href="css/main.css" /> </head> <body> <ul class="lavaLamp"> <li><a href="#">homepage</a></li> <li><a href="#">about_me</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> </ul> </body> </html> |
Poi ho caricato le varie librerie jquery e lavalamp, e infine ho modifica la gif che mi serviva per effettuare il movimento con i colori che io volevo.
Ovviamente potete scaricare l’esempio da qui in meno di un click.
Semplice no? Alla prossima 
Potresti trovare interessante anche
Pubblicato in javascript, jquery |
Ciao,intanto complimenti per il blog,una domanda: se io volessi che si apra un sottomenu’?Grazie!e complimenti ancora siete un mio punto di riferimento..