Tutorial: Hide menu com imagem

Hooy gente  á quanto tempo eu não postava um tutorial pra vocês né?  Pois bem, hoje eu criei vergonha na cara e vou ensinar a fazer um menu com um efeito super legal! 

Live a preview

Não caprichei na imagem  (risos) mais o principal objetivo foi alcançado (vocês viram como o menu funciona). 
Aah quem desenrola mais no HTML vai saber personalizar de olhos fechados e quem está começando agora não se preocupe que os códigos já dizem o que pode ser feito e se tiverem dúvidas é só comentar que eu ajudo ;D 

Clique em leia mais e confira o tutorial 


 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>

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

Feito isso salve!

No local que você deseja que o menu apareça é só adicionar o seguinte código:

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

É isso vi no cor seletiva, espero que tenham gostado  do tutorial de hoje... Bye Bye