Slide down menu with or without an image tutorial:
With Image Tutorial:
STEP 1:
Copy this script:
<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>
Then, go to your tumblr page and click Customize > Theme > Custom HTML and find the <head> tag (it should be near the top, if you can’t find it use Ctrl-F) and paste the script right below it.
STEP 2:
Copy this script and go to Customize > Info and paste it in your description:
<div class=”links_list”>
<img src=”IMAGE URL HERE” class=”links_head”>
<div class=”links_body”>
<center>
<a href=”LINK URL HERE“>LINK TITLE HERE</a>
<a href=”LINK URL HERE“>LINK TITLE HERE</a>
<a href=”LINK URL HERE“>LINK TITLE HERE</a>
<a href=”LINK URL HERE“>LINK TITLE HERE</a>
</center>
</div></div>
Then obviously replace IMAGE URL HERE with the URL of whatever photo/image you want. This image will be what people click to make the links slide out. Then change LINK URL HERE with the URL of the page that you want the link to redirect to, and of course change LINK TITLE HERE with the title of your whatever you want your link to say. If you are experiencing any problems retype all of the quotation marks (“).
____________________________________________________________
WITHOUT IMAGE TUTORIAL:
STEP 1:
Copy this script:
<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>
Then go to your tumblr page and click Customize > Theme > Custom HTML and find the <head> tag (it should be near the top, if you can’t find it use Ctrl-F) and paste the script right below it.
STEP 2:
Copy this script and go to Customize > Info and paste it in your description:
<div class=”links_list”>
<p class=”links_head”>LINKS HEADER</p>
<div class=”links_body”>
<center>
<a href=”LINK URL HERE“>LINK TITLE HERE</a>
<a href=”LINK URL HERE“>LINK TITLE HERE</a>
<a href=”LINK URL HERE“>LINK TITLE HERE</a>
<a href=”LINK URL HERE“>LINK TITLE HERE</a>
</center>
</div></div>
Then, replace LINKS HEADER with whatever you want. This will be what people click to make the links slide out. Then change LINK URL HERE with the URL of the page that you want the link to redirect to, and of course change LINK TITLE HERE with the title of your whatever you want your link to say. If you are experiencing any problems retype all of the speech marks (“).
For more tutorials click here.
(Source: king-of-diamonds)
