Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

8/03/2013

Wordpress : Menu Hover no Header

Esse tutorial pediram no Aks, e eu decidi postar também é bem simples esse menu é mesmo do tutorial de menu hover no blogger confiram: 1 - Vá em Aparência > Editar Modelo > Style.css e cole esse código :
menu  {
font-family: Verdana; 
letter-spacing: 2px; 
font-size: 10px; 
line-height: 13px; 
display: 
inline-block; 
background:#F3F3F3; 
color:#000; 
width: auto; 
padding: 5px; 
margin: 1px; 
text-align: center; 
text-transform: uppercase;
border-bottom: 2px solid #FF99CC;
 -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
}
menu:hover {
font-family:Verdana; 
letter-spacing: 2px; 
font-size: 10px; 
line-height: 13px; 
display: inline-block; 
background:  #000; 
color:#fff; 
width: auto; 
padding: 5px; 
margin: 1px; 
text-align: center; 
text-transform: uppercase; 
border-bottom: 5px solid #00CCFF;
 -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
}
2 - E para usar vá em header.php e cole esse código :
<a href="LINK"  title="TITULO"><menu>NOME</menu>
E se você quiser usar ele em algum outro lugar use esse código de posicionamento.
<div style="position: absolute; top:-300px; left: 6px;">
-300 altera para cima e para baixo
6px altera para a esquerda (-6px) altera para a direita.
Tutorial feito por : Sugoi Tutoriais. 

Nenhum comentário:

Postar um comentário

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.