Colocar Menu Click

Esse é bem legal pra gente personaliza o menu com imagens, espero que gostem!!!


Como fica:

Após clicar, como fica:

Link
Link
Link
Link

Você pode modificar para ficar no estilo de seu Blog. Vamos aprender ?

1º passo: Coloque o código abaixo ANTES de </head>

<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>

2º Passo: coloque o código abaixo ACIMA de ]]></b:skin>

.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;
 }

Prontinho! pode salvar!

3º Passo: Vá em layout - adicionar um gaget e clique em HTML java. Cole o código abaixo fazendo as alteraçoes desejadas e salve.

<div class="lista"><img src="www.LINKDASUAIMAGEM" 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>