24 de jul de 2012

Menu com Efeito Hover Rolante

Tumblr_m7o5zsn4de1qhzv6oo1_500_large
Bom Dia! Vim ensinar como eu fiz o menu que estou usando no novo "Sweet Fireworks", o agora "Comprei Glitter":
Pois então, vamos aprender?


1. No Blogger, vá em Design> Editar HTML. Tecle Ctrl F e procure por:
]]></b:skin>
2. Acima dessa tag, cole:
.sidenav a:link, .sidenav a:active, .sidenav a:visited {
width:200px; /* Tamanho dos links */
color:#bea48f; /* Cor dos links */ 
display: inline-block; /* Modo de exibição */
text-decoration:none; /* Efeitos do texto. Normalmente está desativado. */
font-family:segoe ui light; /* Fonte */
font-size:12px; /* Tamanho da fonte */
padding:2px; /* Margem interna */
padding-left:10px; /* Margem interna */
border-left:10px solid #bea48f; /* Estilo da borda lateral dos links */
margin-top:2px; /* Margem interna */
-webkit-transition-property:color, text; /* Efeito fade */
-webkit-transition-duration: .4s; /* Efeito fade */
-moz-transition-duration: .4s; /* Efeito fade */
-webkit-transition-timing-function: linear, ease-in; /* Efeito fade */
}

.sidenav a:hover {
background-image:url(http://media.tumblr.com/tumblr_lkl75bsU9n1qfamg6.png); /* Mini gif do hover */
background-repeat:no-repeat; /* Repetição do mini gif. Normalmente está desativado. */
background-position:right; /* Posição do mini gif */
border-left:30px solid #bea48f; /* Estilo da borda lateral em hover */
width:180px; /* Tamanho dos links */
color:#e9b3ff; /* Cor dos links em hover */
padding-left:20px; /* Margem interna */
-webkit-transition-duration: .4s; /* Efeito fade */
-moz-transition-duration: .4s; /* Efeito fade */
}
3. Salve e vá para Elementos da Página. Crie um novo gadget de HTML/Javascript e nele cole o código abaixo:
<div class="sidenav">
<a href="URL 1">LINK 1</a>
<a href="URL 2">LINK 2</a>
<a href="URL 3">LINK 3</a>
<a href="URL 4">LINK 4</a>
<a href="URL 5">LINK 5</a>
</div>
4. Salve.

O Tutorial foi Totalmente copiado de Sweet Poison.

Abraços, Cáah.

2 comentários:

Blogueiros disse...

Aceita Parceria??

blogueiros-kaal.blogspot.com

Mrs. Talia disse...

Adorei o efeito do tutorial. Beijos http://modaecompaniaup.blogspot.com.br/ - http://princesa-blogueira.blogspot.com.br/