Creating a Sliding javascript Menu

RSS Newsfeed
for your site

DW News
Calendar
DW Forum

Right click on button and copy shortcut

Reminder

Remember to book mark this site!

Sliding Menu

By Cullen_tir

The sliding menu slides in with the click of a button and slides out with the click of a button. Copy the following buttons to use with your script by right clicking on these and select save as.

Click gif,,menu slids in or out
----------------

<!-- TWO STEPS TO INSTALL GLIDE-IN MENU:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

<style>

#menuShow{
border: 1px solid #666666;
background-color: #111111;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}

#menuSelect{
border: 1px solid #666666;
background-color: #111111;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}

</style>
</HEAD>

<BODY>

<!-- Begin
// (C) 2001 www.CodeLifter.com

// Set Show to "yes" to show the menu on start-up.
// Set Show to "no" to show the selector on start-up.

Show ="yes";

// Set OffX in pixels to a negative number 
// somewhat larger than the width of the menu.

var OffX = -150;

// Set the PosX and PosY variables
// to the location on the screen where the
// menu should position (in pixels) when stopped.

var PosX =  250;
var PosY =  100;

// Usually, use the settings shown; but you can
// change the speed and the increment of motion
// across the screen, below.

var speed        = 1;
var increment    = 1;
var incrementNS4 = 5; // for slower NS4 browsers

// do not edit below this line
// ===========================

var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;

var MenuX = OffX;
var SelX = PosX;
var sPosX = PosX;
var sOffX = OffX;

if (Show == "yes") {
sPosX = OffX;
sOffX = PosX;
MenuX = sOffX;
SelX = sPosX;
}

if (is_NS4) {
increment = incrementNS4;
Lq = "document.layers.";
Sq = "";
eval(Lq+'menuSelect'+Sq+'.left=sPosX');
eval(Lq+'menuShow'+Sq+'.left=sOffX');
eval(Lq+'menuSelect'+Sq+'.top=PosY');
eval(Lq+'menuShow'+Sq+'.top=PosY');
} else {
Lq = "document.all.";
Sq = ".style";
document.getElementById('menuSelect').style.left = sPosX+"px";
document.getElementById('menuShow').style.left = sOffX+"px";
document.getElementById('menuSelect').style.top = PosY+"px";
document.getElementById('menuShow').style.top = PosY+"px";
}