江西广告网

标题: DIV学写带动画的CSS+JS下拉导航条 [打印本页]
作者: admin    时间: 2009-10-9 02:27
标题: DIV学写带动画的CSS+JS下拉导航条
  1. <html>
  2. <head>
  3. <title>DIV下拉菜单导航条</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. </head>
  6. <body>
  7. <style type="text/css">
  8. body{font-size:9pt;}
  9. .menubar{position:absolute;top:10px;width:100px;height:20px;cursor:default;border-width:1px;border-style:outset;color:#99FFFF;background:#669900}
  10. .menu{position:absolute;top:32px;width:140px;display:none;border-width:2px;border-style:outset;border-color:white sliver sliver white;background:#333399;padding:15px}
  11. .menu A{text-decoration:none;color:#99FFFF;}
  12. .menu A:hover{color: #FFFFFF;}
  13. </style>
  14. <script language="javascript">
  15. function divControl(show){//判断是否显示相对应的下拉列表
  16.         window.event.cancelBubble=true;
  17.         var objID=event.srcElement.id;
  18.         var index=objID.indexOf("_");
  19.         var mainID=objID.substring(0,index);
  20.         var numID=objID.substring(index+1);

  22.         if(mainID=="Tdiv"){
  23.                 if(show==1){eval("showdiv("+"Div"+numID+")");}
  24.                 else{eval("hidediv("+"Div"+numID+")");}
  25.         }
  26. }
  27. var nbottom=0,speed=2;
  28. function displayMenu(obj){//在显示下拉菜单时,以下拉方式显示下拉菜单
  29.         obj.style.clip="rect(0 100% "+nbottom+"% 0)";
  30.         nbottom+=speed;
  31.         if(nbottom<=100){
  32.                 timerID=setTimeout("displayMenu("+obj.id+"),1");
  33.         }
  34.         else clearTimeout(timerID);
  35. }
  36. function showdiv(obj){//显示下拉列表
  37.         obj.style.display="block";
  38.         obj.style.clip="rect(0 0 0 0)";
  39.         nbottom=5;
  40.         displayMenu(obj);
  41. }
  42. function hidediv(obj){//隐藏下拉列表
  43.         nbottom=0;
  44.         obj.style.display="none";
  45. }
  46. function keepstyle(obj){//在下拉菜单中移动时,保持下拉列表的样式
  47.         obj.style.display="block";
  48. }
  49. </script>
  50. <table width="400" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size:15px">
  51. <tr>
  52. <td width="20%">
  53. <div align="center"id="Tdiv_1" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
  54. 源码爱好者
  55. </div>
  56. </td>
  57. <td width="20%">
  58. <div align="center"id="Tdiv_2" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
  59. 源码下载
  60. </div>
  61. </td>
  62. <td width="20%">
  63. <div align="center"id="Tdiv_3" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
  64. Ajax实例
  65. </div>
  66. </td>
  67. <td width="20%">
  68. <div align="center"id="Tdiv_4" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
  69. 特效代码
  70. </div>
  71. </td>
  72. </tr>
  73. </tr>
  74. <tr>
  75. <td width="20%">
  76. <div align="left"id="Div1" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
  77. <a href="#">最新更新</a><br>
  78. <a href="#">下载排行</a><br>
  79. <a href="#">资源导航</a>
  80. </div>
  81. </td>
  82. <td width="20%">
  83. <div align="left"id="Div2" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
  84. <a href="#">VB</a><br>
  85. <a href="#">JScript</a><br>
  86. <a href="#">Java</a></div>
  87. </td>
  88. <td width="20%">
  89. <div align="left"id="Div3" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
  90. <a href="#">Delphi</a><br>
  91. <a href="#">jQuery</a><br>
  92. <a href="#">Mootools</a></div>
  93. </td>
  94. <td width="20%">
  95. <div align="left"id="Div4" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
  96. <a href="#">CSS菜单</a><br>
  97. <a href="#">CSS布局</a><br>
  98. </td>
  99. </table>
  100. </body>
  101. </html>
复制代码




欢迎光临 江西广告网 (http://bbs.jxadw.com/) Powered by Discuz! X3.2