Sliding Drop Down Menu With Image II
- Copy the code below and paste between <head> </head> tags
<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".links_body").hide();
$(".links_head").click(function(){
$(this).next(".links_body").slideToggle('fast');
}); }); </script>
<style type="text/css">
.links_list { margin:0px; padding:0px; width:180px;}
.links_head { padding-top:5px; padding-bottom:5px; cursor:pointer; position:relative; margin:1px; text-align:center;}
.links_body { padding:10px; text-align:left; color: #fff; display:none;}
</style>
- Put this code into your Description
<div class="links_list">
<img src="IMG URL" class="links_head">
<div class="links_body">
<center>
<a href="LINK URL">LINK TITLE</a>
<a href="LINK URL">LINK TITLE</a>
<a href="LINK URL">LINK TITLE</a>
<a href="LINK URL">LINK TITLE</a>
</center>
</div></div>
- Change The “IMG URL” with url of image you want. “LINK URL” with Url link example http://www.tumblr.com/. “LINK TITLE” with title of your url.
Sliding Dropdown Menu
1. Copy the code below before <style type=”text/css”>
<script src="http://static.tumblr.com/me5sfsd/1YFl414t0/jquery142.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li.drawer div:nth-child(2)').hide();
$('li.drawer h4').click(function () {
if ($(this).hasClass('open')) {
$('li.drawer div:visible:nth-child(2)').slideUp().prev().removeClass('open');}
else {
$('li.drawer div:visible:nth-child(2)').slideUp().prev().removeClass('open');
$(this).next().slideDown();
$(this).addClass('open');}
});
});
</script>
2. Copy and paste the code below before </style>
ul#drawers {width: 100px; list-style: none; margin: 0 auto; padding: 0px; border-top: 0px; color: #000;}
ul#drawers a {text-decoration: none; color: #000;}
ul#drawers li h4 {margin: 0; padding: 0px; text-transform: Camelcase; font-size: 10px; text-align: center; background-color: #363835; background: rgba(255, 255, 255, 0.0); -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;}
h4.small {display: table-cell; width: 100px; margin: 0px; height: 100%;}
li.drawer h4.open {background-color: ; border-top: 0px;}
li.drawer div {padding: 0px; margin: 0px; line-height: 10px; background-color: #363835; background: rgba(255, 255, 255, 0.0);}
li.drawer div li {list-style-type: disc;}
li.drawer div ul {-webkit-padding-start: 12px;}
3. Then add this code in your description. Replace “Title / Image URL” with title or image you want to click on for the menu to slide. Replace “LINK HERE” with the link you want, “TEXT HERE” with the title of the link.
<ul > <li class="drawer" > <h4>Title / Image URL</h4> <div align="center"> <p> <a href="LINK HERE">TEXT HERE</a> <p> <a href="LINK HERE">TEXT HERE</a> <p> <a href="LINK HERE">TEXT HERE</a> </p> </div> </li> </ul>
**add this if you want use an image:
<img src="IMAGE URL"></a>
example:
<h4><img src="http://bloggingmage.fileave.com/cerealguy.PNG"></a></h4>
Done! Good Luck :)
