Tutorial: Cute Menu

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.

Clique aqui para conferir alguns Mini Gifs

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