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

Source: academyoftumblr

636 Notes/ Hide

  1. bluenose101 reblogged this from academyoftumblr
  2. html-and-etc reblogged this from academyoftumblr and added:
    Source: academyoftumblr Posted by: Mhel
  3. kite-shop reblogged this from academyoftumblr