゜・。。・゜゜・。♡ 。・゜゜・。。・゜

tutorial by: pixelsgalore.tumblr.com

゜・。。・゜゜・。♡ 。・゜゜・。。・゜

Paste this code before <style type="text/css"> in your theme code:

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

Paste this code 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: 1px; text-transform: Camelcase; font-size: 10px; text-align: center; background-color: #363835; background: rgba(255, 255, 255, 0.0); -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;}

h4.small {display: table-cell; width: 100px; margin: 0px; height: 100%;}

li.drawer h4.open {background-color: #121213; border-top: 0px;}

li.drawer div {padding: 2px; margin: 0px; line-height: 12px; 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;}

Then paste this in your description wherever you want your menu, customize it to fit your blog:

<ul id="drawers">
<li class="drawer" id="info"> 
<h4>HEADER HERE</h4>
<div align="center">
<p>
<a href="LINK HERE">TITLE HERE</a>
<p>
<a href="LINK HERE">TITLE HERE</a>
<p>
<a href="LINK HERE">TITLE HERE</a>
</p>
</div>
</li>
</ul>