»
AnglaisFran�aisVietnamien

Imprimer - Slide Menu - JavaScriptBank.com

Version compl�te: jsB@nk » Menu » Flottables » Slide Menu
URL: https://www.javascriptbank.com/slide-menu.html

Slide Menu © JavaScriptBank.comImage se déplace de côté et que l'autre image se déplace en arrière.

Version compl�te: jsB@nk » Menu » Flottables » Slide Menu
URL: https://www.javascriptbank.com/slide-menu.html



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


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


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