How To Make A Slide Menu

How To Make A Slide Menu | http://tipsandtricksfor.blogspot.com/2011/01/how-to-make-slide-menu.html

Hi, Blogger! Now, I will teach you, about How To Make A Slide Menu. Maybe you don't know, what is Slide Menu? Directly, I will give you the example of Slide Menu here. So, if you want to add this menu to your blog, you have to follow the steps.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose HTML/Java Script
4. Add the code below into the place

<style type="text/css">
#hitsukeFX{
position:fixed;
top:150px;
z-index:+1000;
}
.hitsukeFXtab{
 height:100px;
 width:30px; float:left;
 cursor:pointer;
 background:url('http://lh3.ggpht.com/_KdeVdQg2Vsw/Swj9uvNEeVI
/AAAAAAAAAGs/N5XIUu3ymzY/tabs.png') no-repeat;
 }

.hitsukeFXcontent{ float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}

</style> <script type="text/javascript">
function showHidehitsukeFX(){
var hitsukeFX = document.getElementById("hitsukeFX");
 var w = hitsukeFX.offsetWidth;
 hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
 hitsukeFX.opened = !hitsukeFX.opened;
 }

function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }


</script>
<div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
 <div class="hitsukeFXcontent">

 <!-- PUT YOUR CODE HERE -->

 </div>
 </div>
 </div>

 <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

*You must change <!-- PUT YOUR CODE HERE --> with your widget code
*The blue code is the image address

5. Then...Save it!

Loading Related Posts