垂直滑行

  1. <html>
  2. <head>
  3. <style>
  4. body{font-family:arial;}
  5. table{background:black;position:absolute;}
  6. a{color:black;text-decoration:none;font:bold}
  7. a:hover{color:#606060}
  8. td.menu{background:lightblue}
  9.  
  10. table.topnav
  11. {
  12. font-size:80%;
  13. top:0;
  14. left:0;
  15. }
  16.  
  17. table.menu
  18. {
  19. font-size:100%;
  20. bottom:0;
  21. z-index:-1;
  22.  
  23. }
  24. </style>
  25. <script type="text/javascript">
  26. var i=0
  27. var intHide
  28.  
  29. function show()
  30. {
  31. if (i>-100)
  32.     {
  33.     i=i-1
  34.     document.all("menu").style.bottom=i
  35.     }
  36. }
  37.  
  38. function showmenu()
  39. {
  40. clearInterval(intHide)
  41. intShow=setInterval("show()",10)
  42. }
  43.  
  44. function hide()
  45. {
  46. if (i<0)
  47.     {
  48.     i=i+1
  49.     document.all("menu").style.bottom=i
  50.     }
  51. }
  52.  
  53. function hidemenu()
  54. {
  55. clearInterval(intShow)
  56. intHide=setInterval("hide()",10)
  57. }
  58. </script>
  59. </head>
  60. <body>
  61.  
  62. <table class="topnav" width="150">
  63.  <tr bgcolor="#FF8080">
  64.   <td onmouseover="showmenu()" onmouseout="hidemenu()">
  65.    <a href="/i/eg_landscape.jpg"> MENU</a><br />
  66.    <table class="menu" id="menu" width="100%">
  67.    <tr><td class="menu"><a href="/html/index.asp">HTML</a></td></tr>
  68.    <tr><td class="menu"><a href="/xhtml/index.asp">XHTML</a></td></tr>
  69.    <tr><td class="menu"><a href="/css/index.asp">CSS</a></td></tr>
  70.    <tr><td class="menu"><a href="/xml/index.asp">XML</a></td></tr>
  71.    <tr><td class="menu"><a href="/xsl/index.asp">XSL</a></td></tr>
  72.    </table>
  73.   </td>
  74.  </tr>
  75. </table>
  76.  
  77. <br />
  78. <p>请把鼠标移动到 MENU 上，就可以看到菜单的选项。</p>
  79.  
  80. </body>
  81. </html>