Menu anns (coração)

Okaeri ^^

O que trarei agora é um menu - provavelmente já o viram em vários blogs - mas como não sei o nome dele, chamei-lhe "Menu coração". Também é conhecido por "anns". É aquele menu que fica ao lado da sidebar, onde normalmente só se vê um coraçãozinho dentro de um quadrado, e ao passar o rato o quadrado estica e vê-se o nome do link, como se fosse uma etiqueta. ~Péssima explicação~ Enfim, o resultado é esse:

Prévia:

Tutorial:

Procure por:

/b:skin

E acima cole:

.anns {
background: #FFF0F5;
border-right: 3px solid #DA70D6;
border-radius: 0px 5px 5px 0px;
font: normal 10px 'silkscreen';
color: #FFFFFF;
text-shadow: 1px 1px 2px #DDA0DD;
width: 10px;
height: 11px;
overflow:hidden;
padding:4px;
float: left;
margin: 2px;
-webkit-transition-duration: .5s;
}
.anns:hover {
width: 65px;
-webkit-transition-duration: .5s;
}

Lembrando que o modelo é parcialmente meu - geralmente encontra-se com fundo branco, sem bordas e sem cantos arredondados. Mas personalize como quiser, e já pode dizer que é seu. Ah, eu estou a falar do modelo, não de quem inventou os códigos pela primeira vez, obviamente.

Agora, vem a parte da aplicação. Num gadget de HTML/Javascript, você irá escrever o código habitual para os menus, sendo que na classe estará o nome do menu. Ah! Na parte onde coloca o nome do link, eu coloquei um coração antes. Isso fará com que se veja um coração antes de abrir a etiqueta. Se não colocar, o que ficará visível será a primeira letra. É com você... O que está dentro da div, é a posição. Ou seja, você irá definir a que distância está da esquerda, e a altura a que a etiqueta está posicionada. A distância será sempre a mesma (depois de escolher a que quiser), a margin-top é que vai mudar (reduza aos poucos).

Então, o código é este (repita as vezes que precisar - uma para cada link):

<div style="left: 248px; margin-top: -200px; position: absolute;"><div class="anns"><a href="LINK">♥ NOME DO LINK</a></div></div>

Voilá!