Image Map
|

30 de jan de 2012

Tutorial: Cute Menu

5901979115_d3101e6ecd_large

Vamos fazer um Cute Menu? Ele é bem facinho... 
... e o resultado é muito cute! Vamos lá?

Vá no seu html, pressione Ctrl f e procure por:

}]]></b:skin> 
Se não achar, procure por:
]]></b:skin>

Cole acima da tag destacada em laranja, o seguinte código:
/* Cute Menu
----------------------------------------------- */
#menuextra {
display : block;
font-size: 11px;
font-family: Tahoma;
letter-spacing : 0;
border-bottom : 1px dashed #CDB7B5;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 15px;
margin-bottom : 1px;
background : url('URL DO MINE GIF 1') no-repeat left;
padding-left : 10px;
}

#menuextra:hover {
display : block;
text-decoration : none;
vertical-align : middle;
line-height : 15px;
border-bottom : 1px dashed #FF69B4;
background : url('URL DO MINE GIF 2') no-repeat left;
padding-left : 10px;
}

Agora, vamos personalizar:

URL do mini gif 1: Coloque o URL do mini gif que aparecerá quando o mouse não estiver em cima do link.

URL do mini gif 2: Coloque o URL do mini gif que aparecerá quando o mouse estiver em cima do link.


Onde Tem: #CDB7B5:
Coloque a cor do pontilhado que aparecerá embaixo do link quando o mouse não está em cima do link.

Onde tem: #FF69B4
Coloque a cor do pontilhado que aparecerá embaixo do link quando o mouse estiver em cima do link.

Terminou? Então salve.

Seu menu está prontinho! Você pode usar esse menu em qualquer lugar:
  Postagem
  Páginas
  Gadgets (HTML Javascript)

Vou colocar um modelo de Cute Menu, feito pela fofa da Jackie, devidos créditos a ela:

<!—Mini cute menu -->
          <table height="296" align="center" background="http://i.imgur.com/lfQfg.png" border="0" style="width: 180px">
      <tr>
        <td style="height: 52px"></td>
      </tr>
      <tr>
        <td height="115" align="center" valign="middle"><a href=" " style="text-decoration:none; cursor:crosshair">
  <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollAmount="1" direction="up" height="100" style="width: 114px">
   <div align="center"><font face="Arial, Helvetica, sans-serif" color="#FF69B4" size="-1"><b> Cute Menu: </b><br />
<div id="menuextra"><a href="Link">Nome do link</a></div>
<div id="menuextra"><a href="Link">Nome do link</a></div>
<div id="menuextra"><a href="Link">Nome do link</a></div>
<div id="menuextra"><a href="Link">Nome do link</a></div>
</font></div></marquee></a></td>
      </tr>
    </table><!-- Fim do mini menu jackie dream -->

Quando quiser adicionar outra categoria, adicione:
<div id="menuextra"><a href="Link">Nome do link</a></div>
entre as tags:
</font></div></marquee></a></td> e <br />

Algum, erro? Comente que vamos arrumar! Beijoos

0 cherryes comentaram! Vc ta aqui?: