Tutorial - Menu hover deslizante

 

Boa tarde novamente, pessoal.

Na próxima postagem teremos mais uma rodada do "All Star's". O vencedor dessa rodada irá competir com o vencedor da primeira e mais outro blog, então fiquem de olho. Tanto para saber se é você quem está batalhando quanto para votar no seu favorito. Deixo meus agradecimentos para os que estão participando ou votando, é muito bom ver que vocês não são os conhecidos "leitores fantasmas".

Como havia dito antes, trouxe mais um tutorial. Dessa vez é de um menu bem simples que achei no A-helphtml, um ótimo tumblr. O menu é daqueles bem pequenos e para mim fica muito bonito em status e coisas que não precisem chamar tanta atenção assim. É bem simples de ser personalizado e aplicado, então não se preocupem com nada. Clique aqui para ir até a preview.

1. Vá até editar HTML e procure por ]]></b:skin>. Acima do código encontrado, cole:

.heart {

display : block;

 font-size: 10px;

font-family: Tahoma;

letter-spacing : 0;

border-bottom : 1px solid #eee;

background-repeat : no-repeat;  

text-indent : 5px;

vertical-align : middle;

text-decoration : none;

 line-height : 15px;

margin-bottom : 1px;

padding-left : 3px;

 -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;

border-left: solid #CORDABORDA;

background: #CORDOFUNDO;

 color: #666 !important;

}

.heart:hover {

display : block;

text-decoration: none;

 vertical-align: middle;

line-height: 15px;

background: #CORDOFUNDOHOVER;

 border-left: solid #CORDABORDAHOVER;

 padding-left: 15px;}

Troque as partes em negrito pelo que elas representam e depois salve.

2. Em um gadget de HTML/JavaScript, cole:

<div class="heart"> Seu texto </div>

Digite o que quiser no espaço indicado e depois salve. Seu menu estará pronto.