Menu Desires

Yo minhas batatinhas, como vão vocês? Trago um menu que usei aqui no blog, os créditos são do blog Sweet Poison, o menu tem efeito hover ao passar o mouse e bem legal.  Que ver o efeito? Basta clicar no botão abaixo, e conferir. Se gostou siga o tutorial mais abaixo. 

Brevia do efeito

1. Em seu HTML procure por ]]></b:skin>, acima dessa tag você coloca o próximo código:

Códigos

.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 */
}

2. Depois de tudo salvo! E crie um gadget de HTML/Javascript e nele coloque o próximo código:

Códigos

<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>

Substitua o URL pelo endereço desejado e Link pelo títulos.