7 de nov de 2012

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:


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.

Nenhum comentário:

Postar um comentário