HI, I have got the sliding menu code on internet when I am making my project. You can take below source code to use it.
Save the code below with slidemenu.js
Code:
var spd = 5;
var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById;
if (stdDOM) aDOM = 1;
else
{
ieDOM = document.all; if (ieDOM) aDOM = 1;
else
{
var nsDOM = ((navigator.appName.indexOf('Netscape') != -1)&& (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;
}
}
function xDOM(objectId, wS)
{
if (stdDOM) return wS ? document.getElementById(objectId).style:document.getElementById(objectId);
if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId];
if (nsDOM) return document.layers[objectId];
}
function objWidth(objectID)
{
var obj = xDOM(objectID,0); if(obj.offsetWidth) return obj.offsetWidth; if (obj.clip) return obj.clip.width; return 0;
}
function objHeight(objectID)
{
var obj = xDOM(objectID,0); if(obj.offsetHeight) return obj.offsetHeight; if (obj.clip) return obj.clip.height; return 0;
}
function setObjVis(objectID,vis)
{
var objs = xDOM(objectID,1); objs.visibility = vis;
}
function moveObjTo(objectID,x,y)
{
var objs = xDOM(objectID,1); objs.left = x; objs.top = y;
}
function pageWidth()
{
return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;
}
function pageHeight()
{
return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;
}
function posLeft()
{
return typeof window.pageXOffset != 'undefined' ? window.pageXOffset: document.documentElement.scrollLeft? document.documentElement.scrollLeft: document.body.scrollLeft? document.body.scrollLeft:0;
}
function posTop()
{
return typeof window.pageYOffset != 'undefined' ? window.pageYOffset: document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop? document.body.scrollTop:0;
}
var xxx = 0; var yyy = 0; var dist = distX = distY = 0; var stepx = 2; var stepy = 0; var mn = 'smenu';
function distance(s,e)
{
return Math.abs(s-e)
}
function direction(s,e)
{
return s>e?-1:1
}
function rate(a,b)
{
return a<b?a/b:1
}
function start()
{
xxx = -225; yyy = 150; var eX = 0; var eY = 100; dist = distX = distance(xxx,eX); distY = distance(yyy,eY); stepx *= -direction(xxx,eX) * rate(distX,distY); stepy *= direction(yyy,eY) * rate(distY,distX); moveit();
setObjVis(mn,'visible');
}
function moveit()
{
var x = (posLeft()+xxx) + 'px'; var y = (posTop()+yyy) + 'px'; moveObjTo(mn,x,y);
}
function mover()
{
if (dist > 0)
{
xxx += stepx; yyy += stepy; dist -= Math.abs(stepx);
}
moveit(); setTimeout('mover()',speed);
}
function slide()
{
dist = distX; stepx = -stepx; moveit(); setTimeout('mover()',spd*2);return false;
}
onload = start;
window.onscroll = moveit;
Then save following code with slide1.css
Code:
#smenu
{
background-color:#ffffff; text-align:center; border:1px solid #000099; z-Index:999; visibility:hidden; position:absolute; top:100px; left:-225px; width:250px;
}
#sleft
{
width:220px; float:left;
}
#sright
{
width:20px; float:right;
}
#sright a:link
{
text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;
}
#sright a:visited
{
text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;
}
#sright a:active
{
text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;
}
#sright a:hover
{text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;
}
Now just link these two files into the head of your page using the following code:
Code:
<script type="text/javascript" src="slidemenu.js">
</script>
<link rel="stylesheet" href="slide1.css" type="text/css" />
And Done.
Bookmarks