CodeLifter.com - JavaScript Amazing Glider Menu Script

Instructions for Demo

Click on the icon at the top of the menu to start the gliding action. The menu will glide off the page and a "selector" box with the same icon will slide onto the page. Click on the icon again, and the action reverses. The script can be set so that the menu shows on start-up, or the selector box does.

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

<!--
============================================================
Script:     Amazing Glide-In Menu Script

Functions:  When an icon is clicked, this script glides in
            a menu from screen-left.  Clicking on the same
            icon in the menu causes it to slide off the
            screen, with the triggering icon sliding back
            in.  The script can be set to have either the
            trigger icon or the menu show on start-up; and
            the menu and trigger icon positions can be set
            via script variables. An easy install, and a
            cool effect.

Browsers:   IE4-6,NS4-6
            (some limited functionality in NS4)

Author:     etLux
============================================================

INSTRUCTIONS:

This is another case where the script is actually fairly
easy to install and set up, but the simplest way to present
it is in a full-page working demo. Copy and paste this
entire selection into a blank page. Follow the intructions
commented into the script.

============================================================
//-->

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

// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.

// 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";
}

</script>

</body>
</html>

Get The Code!

CodeLifter is a CodeBrain.com Sister Site
� 1995-2008 OEC Corp & CodeLifter.com
CodeLifter� & CodeBrain�
Legal Notices

CodeBrain InterNET Group
BrainCode.com	CodeFoot.com	CodeBelly.com
D3Q.com	etLux.com	FFFast.com
IEFix.com	PopUpWorks.com	MicroTicker.com
DavidSosnowski.com	OECCorp.com	MailToProtector.com
	CodeBrain.com

Free MP3
Downloads

Contemporary classical music, completely free.