Menu Hide com Imagem

Hey, angels :) What's up?

Lembram-se do antigo menu do Mrs. Nightshade? O menu é chamado "Hide com imagem" e hoje eu queria ensinar como fazer para vocês.

Para quem não se lembra do menu:

Antes do clique

Após o clique

Agora que refresquei a memória de vocês, vamos começar?

Tenha sua imagem, já hospedada. A que eu usei quando o blog era feat. Chris Drew foi essa:

170x47

Primeiramente, vá em Modelo > Editar HTML. Aperte Ctrl+F, procure por </head> e quando encontrar cole esse código ANTES:

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".l-corpo").hide();
$(".l-top").click(function(){
$(this).next(".l-corpo").slideToggle('fast');
}); }); </script>

Agora procure por ]]></b:skin> e coloque o código seguinte ANTES:

.lista { margin:0px; padding:0px; width:130px; /*largura*/ } .l-top { cursor:pointer; position:relative; text-align:center; } .l-corpo { padding:10px; text-align:left; color: #000; /*cor da fonte quando não tem link*/ font-family:Verdana; font-size:11px; display:none; } .l-corpo a{ color: #49aec0; /*cor da fonte link*/ text-decoration:none; } .l-corpo a:hover{ color: #fe5a27; /*cor da fonte ao passar o mouse sobre o link*/ text-decoration:none; }

Fez? Bom, agora cheque seu blog e veja se nada estranho ocorreu. Se estiver tudo certo, salve. Agora o menu precisa aparecer, não é? Então adicione um gadget de HTML/Javascript onde você quer que o menu apareça e cole esse código nele:

<div class="lista">
<img src="www.LINKDASUAIMAGEM.com" class="l-top">
<div class="l-corpo">
<center>
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a>
</center>
</div>
</div>

Altere da seguinte forma:

www.LINKDASUAIMAGEM.com = a imagem do seu menu (ou seja, quando você clicar nessa imagem os links vão aparecer).

www.SEULINKAQUI.com = a URL da sua página

Link = o nome da sua página

Nota:

Assim como tinha colocado nos créditos anteriores (os créditos do Mrs. Nightshade ficam na F.A.Q.), aprendi esse menu no Jackie Dream.

É super fácil fazer esse menu, não é?

Bom, espero que tenham entendido e que tenha sido útil.

Beijos,

Mrs. Nightshade.