How to make a Slide Menu

Hi, Blogger! Now, I will
teach you, about
How To Make A Slide Menu. Maybe you don't
know, what is Slide
Menu? These are menus that will slide out from the sides of the page. So, if
you want to add this
menu to your blog, you
have to follow the steps.

1. Log in to your blogger
Dashboard

2. Go to Page Elements --> Add Gadget
3. Choose HTML/JavaScript
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
">
<!-- INSERT 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
<-- INSERT YOUR CODE HERE --> with your widget code
* Change the image address
5. Then...Save it!

Join the family by like our page:
www.facebook.com/MaxkdaveBlog
Happy Blogging!

No comments:

Post a Comment