18/09/2012

Menu Hover


Yo minhas estrelinhas, trago mais um menu para vocês, o efeito do menu  é que as imagens ficam ao lado do link e que mudam ao passar o mouse sobre ele. Ele e bem maneiro e irei usa-lo no meu próximo layout. \o/

1. Agora em seu HTML procure por ]]></b:skin>, achou? A cima dele coloque esse proximo codigo:

Códigos
/*Hover Menu
----------------------------------------------- */
#menuextra {
display : block;
font-size: 11px;
font-family: ariel;
letter-spacing : 0;
border-bottom : 1px dashed #000000;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 17px;
margin-bottom : 1px;
background : url(1 Imagem) no-repeat left;
padding-left : 10px;
}

#menuextra:hover {
display : block;
text-decoration : none;
vertical-align : middle;
line-height : 17px;
border-bottom : 1px dashed #FF1D79;
background : ur l(2 Imagem) no-repeat left;
padding-left : 10px;
}


2. Agora crieu um adget HTML/JavaScript e dentro dele coloque isso: 

Códigos
 <div id="menuextra"><a href="LINK">NOME</a></div>

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345