Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » Trình đơn ẩn ở phía trái
URL: https://www.javascriptbank.com/floatable-slide-in-navigation.html
Hiệu ứng tạo một trình đơn tự động nằm khuất ở phía trái của trang web và chỉ hiển thị phần tiêu đề trình đơn ở trạng thái bình thường, nhưng mỗi khi người dùng rê chuột đến thì trình đơn sẽ trượt từ trong với đầy đủ các tùy chọn.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » Trình đơn ẩn ở phía trái
URL: https://www.javascriptbank.com/floatable-slide-in-navigation.html
<STYLE><!--A.ssmItems:link{color:black;text-decoration:none;}A.ssmItems:hover{color:black;text-decoration:none;}A.ssmItems:active{color:black;text-decoration:none;}A.ssmItems:visited{color:black;text-decoration:none;}//--></STYLE><SCRIPT language="JavaScript1.2">//Static Slide Menu 6.5 © MaXimuS 2000-2001, All Rights Reserved.//Site: http://www.absolutegb.com/maximus//Script featured on Dynamic Drive (http://www.dynamicdrive.com)//March 20th, 09'- Updated for IE8 compatibilityNS6 = (document.getElementById&&!document.all)IE = (document.all)NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")tempBar='';barBuilt=0;ssmItems=new Array();function truebody(){return (document.compatMode!="BackCompat")? document.documentElement : document.body}moving=setTimeout('null',1)function moveOut() {if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}else {clearTimeout(moving);moving=setTimeout('null',1)}};function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}function moveBack1() {if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}else {clearTimeout(moving);moving=setTimeout('null',1)}}function slideMenu(num){if (IE) {ssm.pixelLeft += num;}if (NS6) {ssm.left = parseInt(ssm.left)+num+"px";}if (NS) {ssm.left = parseInt(ssm.left)+num; bssm.clip.right+=num;bssm2.clip.right+=num;}}function makeStatic() {if (NS||NS6) {winY = window.pageYOffset;}if (IE) {winY = truebody().scrollTop;}if (NS6||IE||NS) {if (winY!=lastY&&winY>YOffset-staticYOffset) {smooth = .2 * (winY - lastY - YOffset + staticYOffset);}else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}else {smooth=0}if(smooth > 0) smooth = Math.ceil(smooth);else smooth = Math.floor(smooth);if (IE) bssm.pixelTop+=smooth;if (NS6) bssm.top=parseInt(bssm.top)+smooth+"px"if (NS) bssm.top=parseInt(bssm.top)+smoothlastY = lastY+smooth;setTimeout('makeStatic()', 1)}}function buildBar() {if(barText.indexOf('<IMG')>-1) {tempBar=barText}else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')}function initSlide() {if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style;bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";}else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").stylebssm.visibility = "visible";}else if (NS) {bssm=document.layers["basessm1"];bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];bssm2.clip.left=0;ssm.visibility = "show";}if (menuIsStatic=="yes") makeStatic();}function buildMenu() {if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')}if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'"><TR><TD>')}document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'">');for(i=0;i<ssmItems.length;i++) {if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1}else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')}if(!ssmItems[i][1]){document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'px" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')}else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget;document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'px" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')}if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}if(ssmItems[i][4]!="no"){document.write('</TR>')}}document.write('</table>')if (NS6){document.write('</TD></TR></TABLE>')}if (IE||NS6) {document.write('</DIV></DIV>')}if (NS) {document.write('</LAYER></ILAYER></LAYER>')}theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)}</SCRIPT><SCRIPT language="JavaScript1.2"><!--/*Configure menu styles belowNOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors*/YOffset=150; // no quotes!!XOffset=0;staticYOffset=30; // no quotes!!slideSpeed=20 // no quotes!!waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.menuBGColor="black";menuIsStatic="yes"; //this sets whether menu should stay static on the screenmenuWidth=150; // Must be a multiple of 10! no quotes!!menuCols=2;hdrFontFamily="verdana";hdrFontSize="2";hdrFontColor="white";hdrBGColor="#170088";hdrAlign="left";hdrVAlign="center";hdrHeight="15";linkFontFamily="Verdana";linkFontSize="2";linkBGColor="white";linkOverBGColor="#FFFF99";linkTarget="_top";linkAlign="Left";barBGColor="#444444";barFontFamily="Verdana";barFontSize="2";barFontColor="white";barVAlign="center";barWidth=20; // no quotes!!barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.///////////////////////////// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a headerssmItems[0]=["Menu"] //create headerssmItems[1]=["JavaScriptBank.com", "http://JavaScriptBank.com", ""]ssmItems[2]=["Link Item #", "http://JavaScriptBank.com/",""]ssmItems[3]=["Link Item #", "http://JavaScriptBank.com/", ""]ssmItems[4]=["Link Item #", "http://JavaScriptBank.com/", "_new"]ssmItems[5]=["Link Item #", "http://JavaScriptBank.com/", ""]ssmItems[6]=["Link Item #", "http://JavaScriptBank.com/", ""]ssmItems[7]=["Section #", "http://JavaScriptBank.com", "", 1, "no"] //create two column rowssmItems[8]=["#", "http://JavaScriptBank.com", "",1]ssmItems[9]=["External Links", "", ""] //create headerssmItems[10]=["Link Item #", "http://JavaScriptBank.com", ""]ssmItems[11]=["Link Item #", "http://JavaScriptBank.com", ""]ssmItems[12]=["Link Item #", "http://JavaScriptBank.com", ""]buildMenu();//--></SCRIPT>