Menu LavaLamp
Autor: Unconcient Girls | Publicado: 2012-01-29T23:37:00-02:00


Eu sei muito bem que existem milhares de tutoriais explicando o menu LavaLamp. Mas resolvi colocar aqui para tudo ficar realmente "completo".Mãos a obra?
Copie este código:/***LAVALAMP BY WWW.UNCONCIENTGIRLS.COM***/.uglava {list-style: none;width: 545px; /***mude aqui a largura do menu***/height: 30px; /***mude aqui a altura do menu***/font-size: 11px; /***mude aqui o tamanho da fonte geral***/float: left;padding: 3px;margin-top: 200px;margin-left: 25px;background-color: #000; /***troque a cor do fundo - agora está preto***/border: 1px solid #363636; /***troque a cor, o tamanho e o estilo da borda - consulte estilos de borda na nossa faq***/-moz-border-radius: 5px; /***radius da borda***/-webkit-border-radius: 5px; /***radius da borda***/}.uglava li {list-style: none;float: left;}.uglava li.back {z-index: 8;position: absolute; /***se você quer que ele fique fixo (no topo por exemplo) troque aqui por fixed***/width: 9px;height: 30px;background: #000; /***cor do fundo - agora está preto***/-moz-border-radius: 5px; /*** radius da borda deve estar igual ao da id configurada acima***/-webkit-border-radius: 5px; /*** radius da borda deve estar igual ao da id configurada acima***/} .uglava li.back .left {height: 30px;margin-right: 9px;background: #000; /***cor do fundo - agora está preto***/-moz-border-radius: 5px;  /*** radius da borda deve estar igual ao da id configurada acima***/-webkit-border-radius: 5px;  /*** radius da borda deve estar igual ao da id configurada acima***/} .uglava li a {z-index: 10;position: relative;overflow: hidden;outline: none;display: block;width: auto;height: 30px;top: 7px;text-decoration: none;text-transform: uppercase; /***mude para lowercase se você quer tudo em letras minúsculas ou para capitalize se você quer escrita normal - agora está em uppercase, todas as letras maiúsculas***/font-weight: bold; /***palavras em negrito - mude para normal se você não quiser***/color: #fff; /***cor das letras e links - agora está branco***/float: left;text-align: center; /***alinhamento do texto dos menus está centralizado, mude se quiser***/letter-spacing: 0;margin: auto 8px;}/***FIM DO LAVALAMP BY WWW.UNCONCIENTGIRLS.COM***/
Cole o código no seu bloco de notas, faça as modificações necessárias. Copie o código já modificado e cole ele antes de &lt;/style&gt;. 
Agora você deve inserir um script para que seu menu funcione corretamente.Copie este código, faça as modificações assinaladas, não mecha em mais nada!

SEUSITE/jquery-1.2.3.min.js’type=’text/javascript’/>
 
SEUSITE/jquery.lavalamp.min.js’ type=’text/javascript’/>
 
SEUSITE.tumblr.com/jquery.easing.min.js’ type=’text/javascript’/>
 
 $(function() { $(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700 })}); 
Agora, localize o local onde você quer implementar o menu e escolha entre dois modelos qual que se encaixa melhor:
LavaLamp Normal:
&lt;ul class=’lavalamp’&gt;&lt;li&gt;&lt;a href=”SEU&nbsp;LINK”&gt;NOME DO LINK&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;


Repita a parte que faz a chamada do link quantas vezes precisar.&lt;li&gt;&lt;a href=”SEU&nbsp;LINK”&gt;NOME DO LINK&lt;/a&gt;&lt;/li&gt;
 LavaLamp de Falso IFrame:

&lt;ul class=’lavalamp’&gt;
&lt;li&gt;&lt;span onClick=”changeNavigation(‘ID DO FRAME’)”&gt;NOME DO LINK&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
Repita a parte que faz a chamada do link quantas vezes precisar.
&lt;li&gt;&lt;span onClick=”changeNavigation(‘ID DO FRAME’)”&gt;NOME DO LINK&lt;/span&gt;&lt;/li&gt; 
Se usar este tutorial dê like (Facebook) logo abaixo. Não tem Facebook? Então clique em Tweet (Twitter) logo abaixo. Também não tem Twitter? Deixe um comentário e não se esqueça de creditar! Alguma sugestão? Comente. Alguma dúvida pergunte na ask.