從頁面左側滑出的導航菜單

2024-09-05 12:19:15

字體：大中小

來源：轉載

供稿：網友

從頁面左側滑出的導航菜單，響應鼠標運作，鼠標放上從左側緩慢移出，鼠標移走則菜單自動隱藏。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>滑出式菜單</title><style></style></head><body><script language="JavaScript">  function MM_displayStatusMsg(msgStr) {    status=msgStr;   document.MM_returnValue = true; }  function highlight(x){ document.forms[x].elements[0].focus() document.forms[x].elements[0].select() }  function MM_jumpMenu(targ,selObj,restore){    eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");   if (restore) selObj.selectedIndex=0; }  var NS IE=document.all; NS=document.layers;  hdrFontFamily="Verdana"; hdrFontSize="2"; hdrFontColor="white"; hdrBGColor="#666666"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#CCCCCC"; linkTarget="_top"; YOffset=60; staticYOffset=20; menuBGColor="black"; menuIsStatic="no"; menuHeader="導航菜單" menuWidth=150; // Must be a multiple of 5! staticMode="advanced" barBGColor="#1298fd"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="white"; barText="網站導航"; function moveOut() { if (window.cancel) {   cancel=""; }  if (window.moving2) {   clearTimeout(moving2);   moving2=""; } if ((IE  &&  ssm2.style.pixelLeft<0)||(NS  &&  document.ssm2.left<0)) {   if (IE) {ssm2.style.pixelLeft += (5%menuWidth); } if (NS) {   document.ssm2.left += (5%menuWidth); }  moving1 = setTimeout('moveOut()', 5) } else {   clearTimeout(moving1)   } };  function moveBack() {   cancel = moveBack1() } function moveBack1() {   if (window.moving1) {     clearTimeout(moving1) }  if ((IE  &&  ssm2.style.pixelLeft>(-menuWidth))||(NS  &&  document.ssm2.left>(-150))) {   if (IE) {ssm2.style.pixelLeft -= (5%menuWidth); } if (NS) {   document.ssm2.left -= (5%menuWidth); } moving2 = setTimeout('moveBack1()', 5)}   else {     clearTimeout(moving2)   } };  lastY = 0; function makeStatic(mode) { if (IE) {winY = document.body.scrollTop;var NM=ssm2.style } if (NS) {winY = window.pageYOffset;var NM=document.ssm2 } if (mode=="smooth") {   if ((IE||NS)  &&  winY!=lastY) {     smooth = .2 * (winY - lastY);       if(smooth > 0) smooth = Math.ceil(smooth);     else smooth = Math.floor(smooth);       if (IE) NM.pixelTop+=smooth;         if (NS) NM.top+=smooth;       lastY = lastY+smooth; } setTimeout('makeStatic("smooth")', 1) }  else if (mode=="advanced") {   if ((IE||NS)  &&  winY>YOffset-staticYOffset) {     if (IE) {NM.pixelTop=winY+staticYOffset   } if (NS) {NM.top=winY+staticYOffset   } } else { if (IE) {NM.pixelTop=YOffset }  if (NS) {NM.top=YOffset-7  } } setTimeout('makeStatic("advanced")', 1)  } }  function init() { if (IE) { ssm2.style.pixelLeft = -menuWidth; ssm2.style.visibility = "visible" } else if (NS) { document.ssm2.left = -menuWidth; document.ssm2.visibility = "show" } else { alert('Choose either the "smooth" or "advanced" static modes!') } } function MM_displayStatusMsg(msgStr) {    status=msgStr;   document.MM_returnValue = true; } </script><script language="JavaScript"> if (IE) {document.write('<div   class="eyzhpxc"   id="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')} tempBar="" for (i=0;i<barText.length;i++) { tempBar+=barText.substring(i, i+1)+"<BR>"} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></p></TD></tr>') function addItem(text, link, target) { if (!target) {target=linkTarget} document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=/''+linkOverBGColor+'/'" onmouseout="bgColor=/''+linkBGColor+'/'"><ILAYER><LAYER onmouseover="bgColor=/''+linkOverBGColor+'/'" onmouseout="bgColor=/''+linkBGColor+'/'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> '+text+'</FONT></LAYER></ILAYER></TD></TR>')} function addHdr(text) { document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></td></tr>')} addItem(' ASP.NET', '#', '_blank'); addItem(' VB.NET', '#', '_blank'); addItem('   VC.NET', '#', '_blank'); addItem('   PHP', '#', '_blank'); addItem('   DELPHI', '#', '_blank'); addItem('   JAVA', '#', '_blank'); addHdr('技術文章'); addItem('   ASP', '#', '_blank'); addItem('   ASP.NET', '#', '_blank'); addItem('   CSHARP', '#', '_blank'); addItem('   VB.NET', '#', '_blank'); addItem('   JAVA', '#', '_blank'); addItem('   JSP', '#', '_blank'); document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </td></TR></table>') if (IE) {document.write('</DIV>')} if (NS) {document.write('</LAYER>')} if ((IE||NS)  &&  (menuIsStatic=="yes" && staticMode)) {makeStatic(staticMode);} </script> <script> window.onload=init </script> </body> </html>

上一篇：很獨特的純CSS二級下拉菜單

下一篇：始終顯示在頁面最下部的菜單