ASK: Menu Lava Lamp

Oi gente! Mais um tutorial que foi pedido na ask que conseguimos fazer, esse menu na verdade é do site Gmarwaha, e esse será uma versão adaptada para vocês, então sem duvida nenhuma créditos para eles.Veja o resultado abaixo e confira o tutorial clicando em Mais Informações.

Resultado

1 - Antes de tudo coloque esses códigos antes da tag < /head >.

No Blogger: Procure com o CTRL+F.

No Wordpress: Vá em Aparência > Editor> Cabeçalho (header.php) e procure com o CTRL+F.

Código:

<script type="text/javascript" src="http://static.tumblr.com/um2zssm/8QKn1265a/jquery-1.2.3.min.js"></script>
    <script type="text/javascript" src="http://static.tumblr.com/um2zssm/C9Jn12646/jquery.easing.min.js"></script>
   <script type="text/javascript" src="http://static.tumblr.com/um2zssm/K51n1267i/jquery.lavalamp.js"></script>
    <script type="text/javascript" src="jhttp://static.tumblr.com/um2zssm/Czrn1264r/jquery.lavalamp.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

2 - Coloque esse código no seu css e modifique apenas as cores e o tamanho{em negrito}.

No Blogger: Procure pela tag ]]></b:skin> e cole o código antes.

No Wordpress: Vá em Aparência > Editor> Folha de Estilo (style.css) e cole o código no fim.

Código:

/*** MENU POR: GMARWAHA MODIFICADO POR: SUGOITUTORIAIS.BLOGSPOT.COM ***/
.lavaLampNoImage {
            position: relative;
            height: 29px; /*** ALTURA DO MENU ***/
            width: 421px; /*** LARGURA DO MENU ***/
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
        }
                .lavaLampNoImage li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampNoImage li.back {
                        border-bottom: 5px solid #9d027b; /*** COR DA BORDA ***/
                        background-color: #e6e8ea; /*** COR DO FUNDO ***/
                        width: 9px;
                        height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                    .lavaLampNoImage li a {
                        font: bold 14px arial; /*** FONTE DO MENU ***/
                        text-decoration: none;
                        color: #000;  /*** COR DA FONTE ***/
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;
                    }
                        .lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
                            border: none;
                        }  
/*** FIM DE MENU ***/ 

3 - Coloque o código abaixo onde quer que apareça

<ul class="lavaLampNoImage" id="2">
    <li class="current"><a href="LINK DO ENDEREÇO"> NOME</a></li>
    <li><a href="LINK DO ENDEREÇO> NOME</a></li>
    <li><a href="LINK DO ENDEREÇO"> NOME</a></li>
    <li><a href="LINK DO ENDEREÇO"> NOME</a></li>
</ul>

 

Créditos: Gmarwaha.