点击垂直滑行

  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:lightgreen}
  9. table.topnav{font-size:80%;top:0;left:0}
  10. table.menu{font-size:100%;bottom:0;z-index:-1}
  11. </style>
  12. <script type="text/javascript">
  13. var i=0
  14. var c=0
  15. var intHide
  16. function show_hide_menu()
  17. {
  18. if (c==0)
  19.     {
  20.     clearInterval(intHide)
  21.     intShow=setInterval("show()",10)
  22.     c=1
  23.     }
  24. else
  25.     {
  26.     clearInterval(intShow)
  27.     intHide=setInterval("hide()",10)
  28.     c=0
  29.     }
  30. }
  31. function show()
  32. {
  33. if (i>-100)
  34.     {
  35.     i=i-1
  36.     document.all("menu").style.bottom=i
  37.     }
  38. }
  39. function hide()
  40. {
  41. if (i<0)
  42.     {
  43.     i=i+1
  44.     document.all("menu").style.bottom=i
  45.     }
  46. }
  47. </script>
  48.  
  49. </head>
  50. <body>
  51.  
  52. <table class="topnav" width="150">
  53. <tr>
  54. <td bgcolor="#FF0000" onclick="show_hide_menu()">
  55. <b>MENU</b><br />
  56. <table class="menu" id="menu" width="100%">
  57. <tr><td class="menu"><a href="/html/index.asp">HTML</a></td></tr>
  58. <tr><td class="menu"><a href="/xhtml/index.asp">XHTML</a></td></tr>
  59. <tr><td class="menu"><a href="/css/index.asp">CSS</a></td></tr>
  60. <tr><td class="menu"><a href="/xml/index.asp">XML</a></td></tr>
  61. <tr><td class="menu"><a href="/xsl/index.asp">XSL</a></td></tr>
  62. </table>
  63. </td>
  64. </tr>
  65. </table>
  66.  
  67. <p>请点击 MENU，您会看到菜单的选项。</p>
  68.  
  69. </body>
  70. </html>