Sliding Menu Source Code

[Amaresh]

Hi, Can anyone able to provide me the Coding of Sliding Menu? I am making a page and not have enough space for all menus, so want to use sliding menu. Can anyone help me in this case?

[Reegan]

Hi, I know Html and I am sending you the code which will help you to create the sliding menu.

<div id="sliderWrap">
    <div id="openCloseIdentifier"></div>
    <div id="slider">
    <div id="sliderContent">
    This is working...
    </div>
    <div id="openCloseWrap">
    <a href="#" class="Menu" id="topMenuImage">
    <img src="img.png" alt="open" />
    </a>
    </div>
    </div>
</div>

[MindSpace]

Hi, I don't know any coding for sliding menu, but I have the code in css for sliding menu. If you want you can make use of it.

<style type="text/css">
body 
{
margin: 0;
font-size:16px;
color: #000000;
font-family:Times New Roman;
}
#sliderWrap 
{
margin: 0 auto;
width: 300px;
}
#slider 
{
position: absolute;
background-image:url(one.png);
background-repeat:no-repeat;
background-position: bottom;
width: 200px;
height: 100px;
margin-top: -130px;
}
#slider img 
{
border: 0;
}
#sliderContent 
{
margin: 70px 0 0 70px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 8px;
}
#header 
{
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 150px;
padding: 8px;
}
#openCloseWrap 
{
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}
</style>

[Modifier]

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

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

#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:

<script type="text/javascript" src="slidemenu.js">
</script>
<link rel="stylesheet" href="slide1.css" type="text/css" />

And Done.