Home » Webmaster Tools and Resources » Software & Scripts » DHTML » Slide Out Free Source Code

Slide Out Free Source Code - DHTML Script

This DHTML script is an entire webpage by itself. Open it up into a blank webpage and try it out. You can then add your content around it. Basically, you can have 5 different "layers" which switch when the user clicks on the appropriate links. You can adjust the links, colors, and text below.

Run well on HTML 4.01 Transitional.

View Demo

Insert this code before </head>

<SCRIPT LANGUAGE="JavaScript">
<!--



n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
	slideoutActive = 0
	if (n) {
		slideout1 = document.slideoutInterface.document.slideoutContent.document.slideoutContent1
		slideout2 = document.slideoutInterface.document.slideoutContent.document.slideoutContent2
		slideout3 = document.slideoutInterface.document.slideoutContent.document.slideoutContent3
		slideout4 = document.slideoutInterface.document.slideoutContent.document.slideoutContent4
                slideout5 = document.slideoutInterface.document.slideoutContent.document.slideoutContent5
	}

	if (ie) {
		slideout1 = slideoutContent1.style
		slideout2 = slideoutContent2.style
		slideout3 = slideoutContent3.style
		slideout4 = slideoutContent4.style
                slideout5 = slideoutContent5.style
	}
	slideoutShown = slideout1
	slideoutShown.xpos = 0
	slideoutNew = "none"
	slideoutNew.xpos = -285
}


function slideout(which) {
	if (!slideoutActive && slideoutShown != which) {
		slideoutActive = 1
		slideoutNew = which
		slideoutNew.xpos = -285
		slideoutLeft()
	}
}


function slideoutLeft() {
	if (slideoutShown.xpos > -285) {
		slideoutShown.xpos -= 15
		slideoutShown.left = slideoutShown.xpos
		setTimeout("slideoutLeft()",30)
	}
	else {
		hide(slideoutShown)
		show(slideoutNew)
		setTimeout("slideoutRight()",50)
	}
}


function slideoutRight() {
	if (slideoutNew.xpos < 0) {
		slideoutNew.xpos += 15
		slideoutNew.left = slideoutNew.xpos
		setTimeout("slideoutRight()",30)
	}
	else {
		slideoutShown = slideoutNew
		slideoutActive = 0  // stops the sequence
	}
}


function show(showobj) {
	if (n) showobj.visibility = "show"
	if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
	if (n) hideobj.visibility = "hide"
	if (ie) hideobj.visibility = "hidden"
}

//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
A {color:#000000; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:none; line-height:20pt;}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold; line-height:25pt;}
P {font-family:'Arial'; font-size:10pt; line-height:13pt;}
TD {font-family:'Arial'; font-size:10pt; line-height:13pt;}

#slideoutInterface {position:absolute; left:50; top:50; width:400; height:250; clip:rect(0,400,250,0); background-color:#000000; layer-background-color:#000000; visibility:visible;}
#slideoutSidebar1 {position:absolute; left:5; top:5; width:100; height:30; clip:rect(0,100,30,0); background-color:#9797FF; layer-background-color:#9797FF;}
#slideoutSidebar2 {position:absolute; left:5; top:40; width:100; height:30; clip:rect(0,100,30,0); background-color:#FFFF00; layer-background-color:#FFFF00;}
#slideoutSidebar3 {position:absolute; left:5; top:75; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF80C0; layer-background-color:#FF80C0;}
#slideoutSidebar4 {position:absolute; left:5; top:110; width:100; height:30; clip:rect(0,100,30,0); background-color:#00FF80; layer-background-color:#00FF80;}
#slideoutSidebar5 {position:absolute; left:5; top:145; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF5353; layer-background-color:#FF5353;}

#slideoutContent {position:absolute; left:110; top:5; width:285; height:240; clip:rect(0,285,240,0); background-color:#000000; layer-background-color:#000000;}
#slideoutContent1 {position:absolute; left:0; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:visible;}
#slideoutContent2 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent3 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent4 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent5 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}

//-->
</STYLE>

Insert this code before </body>

<DIV ID="slideoutInterface">

<DIV ID="slideoutSidebar1"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout1)">Contact Us</A></P></DIV>
<DIV ID="slideoutSidebar2"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout2)">Help</A></P></DIV>
<DIV ID="slideoutSidebar3"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout3)">Services</A></P></DIV>
<DIV ID="slideoutSidebar4"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout4)">Products</A></P></DIV>
<DIV ID="slideoutSidebar5"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout5)">Order</A></P></DIV>

<DIV ID="slideoutContent">

<DIV ID="slideoutContent1">
<P ALIGN="CENTER"><STRONG>Contact Us</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.road2webmaster.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.
</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent2">
<P ALIGN="CENTER"><STRONG>Help</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.road2webmaster.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent3">
<P ALIGN="CENTER"><STRONG>Services</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.road2webmaster.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent4">
<P ALIGN="CENTER"><STRONG>Products</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.road2webmaster.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>


<DIV ID="slideoutContent5">
<P ALIGN="CENTER"><STRONG>Order</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.road2webmaster.com"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.

</TD></TABLE>
</P>
</DIV>

</DIV>

Related Resources: