>
Image Map

Colocar Menu Click

1 de agosto de 2013 |

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


Como fica:
Após clicar, como fica:


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>

Nenhum comentário:

Postar um comentário

Olá Gurias e Guris também porque não ♥
Fico muito feliz com seu comentário!!
------------------------------------------------------------------
Agora alguns recadinhos importantes:

♥ Deixe seu link para que eu possa retribuir sua visita;
♥ Se estiver seguindo aqui, me avise para que eu possa seguir seu também;
♥ Comente com todo seu carinho, leia o poste e comente algo relacionado, que retribuirei com o mesmo gesto; ♥
♥ Meus comentários são moderados por segurança, e que eu tenha controle e que eu não deixe de responder ninguém.
♥ Para dúvidas e parcerias entre em contato por e-mail: ~coffecomaszamigas@gmail.com~

~ Obrigada e Volte sempre! ♥
Café com as Zamigas |Luana Mendes

Instagram: @luanamendesblog
Canal no Youtube: Luana
https://www.youtube.com/user/meninadivadamoda