Menu Lovely ♥

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 {
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;
}
 Salve é va em elementos da página  e adicione um novo HTML/javascript e cole o seguinte código:
<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