Full version: jsB@nk » Menu » Floatable » Slide Menu
URL: https://www.javascriptbank.com/slide-menu.html
Picture moves aside and than another picture moves back.
Full version: jsB@nk » Menu » Floatable » Slide Menu
URL: https://www.javascriptbank.com/slide-menu.html
<STYLE type=text/css>A {FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #000000; LINE-HEIGHT: 20pt; FONT-FAMILY: 'Arial'; TEXT-DECORATION: none}STRONG {FONT-WEIGHT: bold; FONT-SIZE: 15pt; LINE-HEIGHT: 25pt; FONT-FAMILY: 'Arial'}P {FONT-SIZE: 10pt; LINE-HEIGHT: 13pt; FONT-FAMILY: 'Arial'}TD {FONT-SIZE: 10pt; LINE-HEIGHT: 13pt; FONT-FAMILY: 'Arial'}#slideoutInterface {LEFT: 50px; VISIBILITY: visible; WIDTH: 400px; CLIP: rect(0px 400px 250px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 250px; BACKGROUND-COLOR: #000000; layer-background-color: #000000}#slideoutSidebar1 {LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 5px; HEIGHT: 30px; BACKGROUND-COLOR: #9797ff; layer-background-color: #9797FF}#slideoutSidebar2 {LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 40px; HEIGHT: 30px; BACKGROUND-COLOR: #ffff00; layer-background-color: #FFFF00}#slideoutSidebar3 {LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 75px; HEIGHT: 30px; BACKGROUND-COLOR: #ff80c0; layer-background-color: #FF80C0}#slideoutSidebar4 {LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 110px; HEIGHT: 30px; BACKGROUND-COLOR: #00ff80; layer-background-color: #00FF80}#slideoutSidebar5 {LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 145px; HEIGHT: 30px; BACKGROUND-COLOR: #ff5353; layer-background-color: #FF5353}#slideoutContent {LEFT: 110px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 5px; HEIGHT: 240px; BACKGROUND-COLOR: #000000; layer-background-color: #000000}#slideoutContent1 {LEFT: 0px; VISIBILITY: visible; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE}#slideoutContent2 {LEFT: -285px; VISIBILITY: hidden; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE}#slideoutContent3 {LEFT: -285px; VISIBILITY: hidden; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE}#slideoutContent4 {LEFT: -285px; VISIBILITY: hidden; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE}#slideoutContent5 {LEFT: -285px; VISIBILITY: hidden; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript><!--n = (document.layers) ? 1:0ie = (document.all) ? 1:0function init() {slideoutActive = 0if (n) {slideout1 = document.slideoutInterface.document.slideoutContent.document.slideoutContent1slideout2 = document.slideoutInterface.document.slideoutContent.document.slideoutContent2slideout3 = document.slideoutInterface.document.slideoutContent.document.slideoutContent3slideout4 = document.slideoutInterface.document.slideoutContent.document.slideoutContent4 slideout5 = document.slideoutInterface.document.slideoutContent.document.slideoutContent5}if (ie) {slideout1 = slideoutContent1.styleslideout2 = slideoutContent2.styleslideout3 = slideoutContent3.styleslideout4 = slideoutContent4.style slideout5 = slideoutContent5.style}slideoutShown = slideout1slideoutShown.xpos = 0slideoutNew = "none"slideoutNew.xpos = -285}function slideout(which) {if (!slideoutActive && slideoutShown != which) {slideoutActive = 1 slideoutNew = whichslideoutNew.xpos = -285slideoutLeft()}}function slideoutLeft() {if (slideoutShown.xpos > -285) {slideoutShown.xpos -= 15slideoutShown.left = slideoutShown.xpossetTimeout("slideoutLeft()",30)}else {hide(slideoutShown)show(slideoutNew)setTimeout("slideoutRight()",50)}}function slideoutRight() {if (slideoutNew.xpos < 0) {slideoutNew.xpos += 15slideoutNew.left = slideoutNew.xpossetTimeout("slideoutRight()",30)}else {slideoutShown = slideoutNewslideoutActive = 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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=init()><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 width=275 border=0> <TBODY> <TR> <TD>You can visit <A href="http://jsmadeeasy.com/"><FONT color=blue>our site</FONT></A> <P>and review and download the huge number of cool scripts! </P></TD></TR></TBODY></TABLE></DIV> <DIV id=slideoutContent2> <P align=center><STRONG>Help</STRONG> </P> <TABLE width=275 border=0> <TBODY> <TR> <TD>You can visit <A href="http://jsmadeeasy.com/"><FONT color=blue>our site</FONT></A> <P>and review and download the huge number of cool scripts! </P></TD></TR></TBODY></TABLE></DIV> <DIV id=slideoutContent3> <P align=center><STRONG>Services</STRONG> </P> <TABLE width=275 border=0> <TBODY> <TR> <TD>You can visit <A href="http://jsmadeeasy.com/"><FONT color=blue>our site</FONT></A> <P>and review and download the huge number of cool scripts! </P></TD></TR></TBODY></TABLE></DIV> <DIV id=slideoutContent4> <P align=center><STRONG>Products</STRONG> </P> <TABLE width=275 border=0> <TBODY> <TR> <TD>You can visit <A href="http://jsmadeeasy.com/"><FONT color=blue>our site</FONT></A> <P>and review and download the huge number of cool scripts! </P></TD></TR></TBODY></TABLE></DIV> <DIV id=slideoutContent5> <P align=center><STRONG>Order</STRONG> </P> <TABLE width=275 border=0> <TBODY> <TR> <TD>You can visit <A href="http://jsmadeeasy.com/"><FONT color=blue>our site</FONT></A> <P>and review and download the huge number of cool scripts! </P></TD></TR></TBODY></TABLE></DIV></DIV></DIV></TD> <TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px" align=right></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->