在网页右上角隐藏的滑出菜单

答案：<html>
<head>
<title>右上角隐藏的滑出菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<style type="text/css">
<!--
#menuBar {position: absolute;left: -200px; width: 300px; top: 0px; clip:     rect(   )}
#glider {position: absolute;left: 200px;top: 0px; width: 80px}
.glideText {font-size: 18px;color: #E2E2E2;text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif}
a:link {  color: #D7D7D7; text-decoration: none}
a:visited {  color: #E0E0E0; text-decoration: none}
a:active {  color: #333333; text-decoration: none}
a:hover {  color: #333333}
.mentd {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; background-color: #999999; background-image:   url(graygrid2.gif)}
td {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #333333}
h1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #FFFFFF}
-->
</style>
<script language="JavaScript">
<!--
var pee = -200
var drec = 40;
var speed = 20;
var l = pee;
function Proj7GlideBack () {l += drec;
  if (document.layers) {
    document.menuBar.left = l;
  }
  else if (document.all) {document.all.menuBar.style.pixelLeft = l;
  }
  else if (document.getElementById) {document.getElementById('menuBar').style.left = l + 'px';
  }
  if (l < 0)
    setTimeout('Proj7GlideBack()', speed);
  
else {
   if (document.layers) {
      var html = '';
      html += '<A HREF="javascript:;"';
      html += 'onClick="Proj7GlideOut(); return false;"';
      html += 'Class="glideText"';
      html += 'close'+ '<br>';
      html += 'close'+ '<Br>';
      html += '<\/A>';
      var a = window.document.menuBar.document.glider;
      a.document.open();
      a.document.write(html);
      a.document.close();
    }
    else if (document.all) {document.all.glidetextLink.innerHTML = 'close';
      document.all.glidetextLink.onclick = moveIn;
    }
    else if (document.getElementById) {
      document.getElementById('glidetextLink').firstChild.nodeValue ='close';
      document.getElementById('glidetextLink').onclick = moveIn;
    }
  }
}

function Proj7GlideOut () {l -= drec;
  if (document.layers) {document.menuBar.left = l;
  }
  else if (document.all) {document.all.menuBar.style.pixelLeft = l;
  }
  else if (document.getElementById) {document.getElementById('menuBar').style.left = l + 'px';
  }
  if (l > pee)
    setTimeout('Proj7GlideOut()', speed);
  else {
    if (document.layers) {
      var html = '';
      html += '<A HREF="javascript:;"';
      html += 'onclick="Proj7GlideBack(); return false;"';
      html += 'Class="glideText"';
      html += 'menu'+ '<Br>';
      html += 'menu'+ '<Br>';
      html += '<\/A>';
      var a = window.document.menuBar.document.glider;
      a.document.open();
      a.document.write(html);
      a.document.close();
    }
    else if (document.all) {document.all.glidetextLink.innerHTML = 'Menu';
      document.all.glidetextLink.onclick = moveOut;
    }
    else if (document.getElementById) {
      document.getElementById('glidetextLink').firstChild.nodeValue = 'Menu';
      document.getElementById('glidetextLink').onclick = moveOut;
    }
  }
}
function moveIn () {Proj7GlideOut();return false;
}
function moveOut() {Proj7GlideBack();return false;
}
<!--NNresizeFix Reloads the page to workaround a Netscape Bug-->
if (document.layers) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (document.layers) onresize = redo;
//-->
</script>
            <div ID="menuBar" style=""> 
              <table width="272" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
                <tr> 
                  <td> 
                    <table width="100%" border="0" cellpadding="8" cellspacing="1">
                      <tr> 
                        <td bgcolor="#FF9900" valign="top" class="mentd"> 
                            <a href="#" onFocus="if(this.blur)this.blur()" class="menu">网页特效</a><Br>
                            <a href="#" onFocus="if(this.blur)this.blur()" class="menu">网站开发</a><Br>
                            <a href="#" onFocus="if(this.blur)this.blur()" class="menu">电子书籍</a><Br>
                            <a href="#" onFocus="if(this.blur)this.blur()" class="menu">站长工具</a><Br>
                            <a href="#" onFocus="if(this.blur)this.blur()" class="menu">网页特效</a><Br>
                            <a href="#" onFocus="if(this.blur)this.blur()" class="menu">论坛系统</a>
                        </td>
            <td width="72" bgcolor="#CC0000"> </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
              <span ID="glider" style=""> 
              <table border="0" cellspacing="0" cellpadding="0">
                <tr align="center"> 
                  <td><a id="glidetextLink"
   href="javascript:;"
   class="glideText"
   onClick="Proj7GlideBack(); return false" onFocus="if(this.blur)this.blur()">Menu</a></td>
                </tr>
              </table></span> </div>
</body>
</html>
上一个：DIV+js后台左侧专用菜单
下一个：JS浮动导航菜单，始终显示在指定位置
更多图片编程知识: