Sliding Drop Down Menu (text or image)
Click read more for code on how to install a drop down menu! (demonstration below of 'closed' and 'open' menu that i currently have on my blog at the time of posting this.)
Click Read More Below for tutorial on how to add a slide down menu like the one above!!
First make sure you have "enabled custom HTML" then add the code bit below before the "<style type="text/css">" section of your theme.
<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>
Next add 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: #121213; 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;}
Finally add the bit below to your description/sidebar
<ul id="drawers">
<li class="drawer" id="info">
<h4>Title here</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>
The last bit of code, is where you put your links. Replace "link here" with the link url, "text here" with the link text and "title here" with what you want to click on for the menu to slide, which can be either text or an image code. to insert an image as the title simply post <img src="IMAGE URL HERE"> where it says title, and voila, you'll get a picture that when clicked will drop down a menu!
(i should point out that sometimes a certain theme won't allow the drop-down menu to work. my suggestion is to double-post the first two bits - and if it still isn't working for you, then try this other version which may work in your theme. good luck!)
for a different type of menu - a standard drop down menu:
copy and paste the following into your description and change the bits in caps,
<select onchange='location=this.options[this.selectedIndex].value;' style='width:100px;'>
<option>HEADER HERE</option>
<option value="LINK HERE">LINK TITLE HERE</option>
<option value="LINK HERE">LINK TITLE HERE</option>
</select>
(click #zorkat helps for more handy info :)
