#sliding menu

A pretty nice sliding menu written in jQuery/CSS that slides out from the toggle button and transforms the hamburger button into a close button when toggled.

Demo

DOWNLOAD

A Facebook Paper inspired header navigation that displays at the top of your window with a smooth CSS3 based sliding effects.

Demo

Download

Just thought I'd post this here since some of you seemed to want the code as well (:

It's the kind where you click and image and it slides down. I lost the HTML for it when I reset my theme and I haven't been able to make it work again.

It used to work just fine but now it won't drop down, wah.

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>