Home » Extras » Tutoriais » Menu com imagem hover
Menu com imagem hover

Nivel: fácil, mas querer conhecimento de CSS


» Esse tutorial explica como se faz o menu que eu uso nos extras (ou melhor, dá o código base), que tem a imagem que muda com o hover, ou seja, quando passa o mouse.

Copie o seguinte código em seu CSS:
/******** MENU IMG HOVER - MADLYLUV.COM */
#menuextra {display : block;
      border-bottom : 1px solid #COR DA BORDA DE BAIXO;
      background-repeat : no-repeat;
      text-indent : 5px;
      vertical-align : middle;
      line-height : 16px;
      margin-bottom : 1px;
      background : url('http://icone.gif') no-repeat left;
      padding-left : 10px;}

#menuextra:hover {display : block;
      vertical-align : middle;
      border-bottom : 1px solid #COR DA BORDA DE BAIXO;
      background : url('http://iconedohover.gif') no-repeat left;
      padding-left : 10px;}
Mude com a cor que você quer, tipo de borda e imagem. Depois, vá no código da sua página e coloque da seguinte maneira:
<div id="menuextra"> Conteúdo </div>
<div id="menuextra"> Conteúdo </div>
<div id="menuextra"> Conteúdo </div>



Ajudou? Creditou
tutorial by Ana Flávia Cador
www.MadlyLuv.com © 2008
Apaixone-se Loucamente <3



www.MadlyLuv.com