Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » Menu-khung trượt
URL: https://www.javascriptbank.com/slide-menu.html
Khi người dùng chọn một trình đơn, đoạn mã JavaScript sẽ làm cho khung chứa nội dung của trình đơn được chọn tự động trượt ra trượt vào.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » Menu-khung trượt
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-->