Barra de Menu Horizontal

Nesta postagem vocês vão aprender como fazer uma barra de menu com um efeito muito legal chamado "Lava Lamp". A cor padrão do menu será verde, porém você poderá alterar para a cor que mais se enquadrar ao padrão do seu blog.

Let's go!

Primeiro salve o seu template fazendo um backup do mesmo.

• Agora, cole o código abaixo após /* The Top */ ou após a tag <b:skin><![CDATA[

/*top menu*/
#foxmenucontainer{
height:32px;
background:url(http://img14.imageshack.us/img14/2479/menursk.jpg)
repeat-x;
display:block;
padding:0px 0 0px 0px;
border-bottom:4px solid #fff;
font: 14px "Century gothic",verdana,
Arial, sans-serif;
font-weight:normal;
}

• Agora vamos configurar o efeito. Para isso copie e cole o código abaixo após o código anterior:

.lavaLampNoImage {
position: relative;
height: 30px;
width: 990px;
padding: 0px 5px;
margin: 0px 0;
overflow: hidden;

}
.lavaLampNoImage li {

float: left;
list-style: none;
margin:0px 0px;
padding:0px 0px;
}
.lavaLampNoImage li.back {

background-color: #6c943d;
width: 5px;
height: 22px;
border:1px solid #74a446;
top:3px;
z-index: 8;
position: absolute;
}
.lavaLampNoImage li a {
font: 14px Century gothic, Arial, Tahoma, sans seriff ;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 4px;
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;
color: #fff;
}

• Após isso, cole o próximo código após a tag: ]]></b:skin>

<script
src='http://web2feel.com/demosite1/wp-content/themes/forexpress/js/lava.js'
type='text/javascript'/>

<script
src='http://web2feel.com/demosite1/wp-content/themes/forexpress/js/jquery.lavalamp.js'
type='text/javascript'/>

E por último, cole o código abaixo após <body> ou

<div id='foxmenucontainer'>
<div style='float:left; '>
<ul class='lavaLampNoImage' id='A'>

<li><a
expr:href='data:blog.homepageUrl'>HOME</a></li>

<li><a
href='Endereço do link'
title='Título que aparecerá quando colocar o mouse'>Título que aparecerá no menu</a></li>

<li><a
href='Endereço do link'
title='Título que aparecerá quando colocar o mouse'>Título que aparecerá no menu</a></li>

<li><a
href='Endereço do link'
title='Título que aparecerá quando colocar o mouse'>Título que aparecerá no menu</a></li>

<li><a
href='Endereço do link'
title='Título que aparecerá quando colocar o mouse'>Título que aparecerá no menu</a></li>

</ul>

</div>

</div>

<div class='clear'/>

Substitua as frases em azul, verde e laranja:
"Endereço do link"= Endereço do link
"Título que aparecerá quando colocar o mouse"= Escreva o tipo de link que você colocou(ex: Contato, ou Filme etc...)
"Título que aparecerá no menu"= Escreva o nome do link(ex: Contato, Filmes, Jogos etc...)

Um abraço!

Ler Mais