Hooy!
Hoje trouxe um tuto super cool que achei no Sweet Poison. Bom ele é de um menu super fofo exatamente assim:
Bom vamos ao tuto.
Vá em Design Editar HTML Editar HTML e procure por:
]]></b:skin>
Depois assima cole o seguinte código:
.nav {Salve é va em elementos da página e adicione um novo HTML/javascript e cole o seguinte código:
display:inline; /* Modo de exibição */
font-size: 25px; /* Tamanho da fonte */
border-bottom: 5px solid #4682B4; /* Estilo da borda inferior */
text-transform:uppercase; /* Formatação do texto */
-webkit-transition-duration: .20s; /* Efeito fade */
}
nav: hover {
border-bottom: 5px solid #63B8FF; /* Borda inferior em hover */
-webkit-transition-duration: .20s; /* Efeito fade */
}
nav a{
font-family: Arial; /* Fonte */
font-size: 25px; /* Tamanho da fonte */
text-transform:uppercase; /* Todas maiúsculas */
-webkit-transition-duration: .20s; /* Efeito fade */
text-decoration: none;
}
nav a:hover {
-webkit-transition-duration: .20s; /* Efeito fade */
text-decoration: none;
}
<div class='nav'><a href='LINK'>Nome</a></div> <div class='nav'><a href='LINK'>Nome</a></div> <div class='nav'><a href='LINK'>Nome</a></div> <div class='nav'><a href='LINK'>Nome</a></div> <div class='nav'><a href='LINK'>Nome</a></div> <div class='nav'><a href='LINK'>Nome</a></div>Agora substitua o ''LINK''e o ''NOME''pelo que você quer. Para deixar o menu no cabeçalho vá no link abaixo e veja o tutorial.
http://blog-sweetpoison.blogspot.com.br/2012/02/objeto-flutuante.html
Kisses!
Nenhum comentário:
Postar um comentário