169、左上角点击弹出菜单

169、左上角点击弹出菜单

脚本说明:

把如下代码加入<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;

 

//Don't touch!

var l = pee;

 

//Don't touch. This is the function that closes the menu

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;

    }

  }

}

//Don't touch. This is the function that opens the menu

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="http://www.1stscript.com" onFocus="if(this.blur)this.blur()" class="menu">Home</a><Br>

                            <a href="http://www.1stscript.com" onFocus="if(this.blur)this.blur()" class="menu">Link

                            Two </a><Br>

                            <a href="http://www.1stscript.com" onFocus="if(this.blur)this.blur()" class="menu">Project

                            VII Home</a><Br>

                            <a href="http://www.1stscript.com" onFocus="if(this.blur)this.blur()" class="menu">Project

                            VII Design Packs</a><Br>

                            <a href="http://www.1stscript.com" onFocus="if(this.blur)this.blur()" class="menu">Link

                            Number Five</a><Br>

                            <a href="http://www.1stscript.com" onFocus="if(this.blur)this.blur()" class="menu">Link

                            Number Six</a>

                        </td>

                        <td width="72" bgcolor="#9999CC"> 

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

 

Write a comment

Comments: 0