二级JS下拉菜单(可轻松扩展成多级下拉菜单)

发表于2011-03-23 15:24:49来源于shirlly的博客

次点击[] [] [] [打印] [关闭窗口] [评论]

欢迎大家加入创想工作室QQ群 网络瘫痪上不了网?电脑出故障?找破解软件?加入创想工作室QQ群,向大神求助,一步解决问题!QQ群号码:326338868[点此获取更多QQ群]

花了一点时间把原来的代码做了一点修改,搞了一个简易版 JavaScript 下拉菜单。其实用 JS 实现下拉菜单比 CSS 简单多了,因为各个浏览器之间对 JS 支持的差异相比 CSS 来说要小一些,不需要花那么多心思用在对付浏览器上。如果 HTML 的结构良好,只需要很少的 JS 代码即可实现,而且可以实现多级下拉菜单的效果(我的示例中给出了二级下拉菜单,可以根据需要按照原来的 HTML 结构逐级添加)。

页面源代码:

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5.     <title>JavaScript下拉菜单</title>   
  6.     <style type="text/css">   
  7.         * {   
  8.             padding:0;    
  9.             margin:0;   
  10.         }   
  11.         body {   
  12.             font-family:verdana, sans-serif;    
  13.             font-size:small;   
  14.         }   
  15.         #navigation, #navigation li ul {   
  16.             list-style-type:none;   
  17.         }   
  18.         #navigation {   
  19.             margin:20px;   
  20.         }   
  21.         #navigation li {   
  22.             float:left;   
  23.             text-align:center;   
  24.             position:relative;   
  25.         }   
  26.         #navigation li a:link, #navigation li a:visited {   
  27.             display:block;    
  28.             text-decoration:none;    
  29.             color:#000;    
  30.             width:120px;    
  31.             height:40px;    
  32.             line-height:40px;    
  33.             border:1px solid #fff;    
  34.             border-width:1px 1px 0 0;    
  35.             background:#c5dbf2;    
  36.             padding-left:10px;    
  37.         }   
  38.         #navigation li a:hover {   
  39.             color:#fff;   
  40.             background:#2687eb;   
  41.         }   
  42.         #navigation li ul li a:hover {   
  43.             color:#fff;   
  44.             background:#6b839c;    
  45.         }   
  46.         #navigation li ul {   
  47.             display:none;   
  48.             position:absolute;    
  49.             top:40px;   
  50.             left:0;   
  51.             margin-top:1px;   
  52.             width:120px;   
  53.         }   
  54.         #navigation li ul li ul {   
  55.             display:none;   
  56.             position:absolute;    
  57.             top:0px;   
  58.             left:130px;    
  59.             margin-top:0;   
  60.             margin-left:1px;   
  61.             width:120px;   
  62.         }   
  63.     </style>   
  64.     <script type="text/javascript">   
  65.         function displaySubMenu(li) {   
  66.             var subMenu = li.getElementsByTagName("ul")[0];   
  67.             subMenu.style.display = "block";   
  68.         }   
  69.         function hideSubMenu(li) {   
  70.             var subMenu = li.getElementsByTagName("ul")[0];   
  71.             subMenu.style.display = "none";   
  72.         }   
  73.     </script>   
  74. </head>   
  75. <body>   
  76.     <ul id="navigation">   
  77.         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">   
  78.             <a href="#">栏目1</a>       
  79.             <ul>   
  80.                 <li><a href="#">栏目1->菜单1</a></li>   
  81.                 <li><a href="#">栏目1->菜单2</a></li>   
  82.                 <li><a href="#">栏目1->菜单3</a></li>   
  83.                 <li><a href="#">栏目1->菜单4</a></li>   
  84.             </ul>   
  85.         </li>   
  86.         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">   
  87.             <a href="#">栏目2</a>       
  88.             <ul>   
  89.                 <li><a href="#">栏目2->菜单1</a></li>   
  90.                 <li><a href="#">栏目2->菜单2</a></li>   
  91.                 <li><a href="#">栏目2->菜单3</a></li>   
  92.                 <li><a href="#">栏目2->菜单4</a></li>   
  93.                 <li><a href="#">栏目2->菜单5</a></li>   
  94.             </ul>   
  95.         </li>   
  96.         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">   
  97.             <a href="#">栏目3</a>       
  98.             <ul>   
  99.                 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">   
  100.                     <a href="#">栏目3->菜单1</a>   
  101.                     <ul>   
  102.                         <li><a href="#">菜单1->子菜单1</a></li>   
  103.                         <li><a href="#">菜单1->子菜单2</a></li>   
  104.                         <li><a href="#">菜单1->子菜单3</a></li>   
  105.                         <li><a href="#">菜单1->子菜单4</a></li>   
  106.                     </ul>   
  107.                 </li>   
  108.                 <li><a href="#">栏目3->菜单2</a></li>   
  109.                 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">   
  110.                     <a href="#">栏目3->菜单3</a>   
  111.                     <ul>   
  112.                         <li><a href="#">菜单3->子菜单1</a></li>   
  113.                         <li><a href="#">菜单3->子菜单2</a></li>   
  114.                         <li><a href="#">菜单3->子菜单3</a></li>   
  115.                     </ul>   
  116.                 </li>   
  117.             </ul>   
  118.         </li>   
  119.     </ul>   
  120. </body>   
  121. </html>

 

 

演示: 

相关热词搜索:二级下拉菜单

© copyright 2002-2024, 22BA.COM All Rights Reserved

网站备案号:粤ICP备19114910号

ChuangXiang Design Studio - WebDesign & Internet Marketing

关于我们业务范围联系我们开心一刻网站地图

QQ群一:326338868QQ群二:78712271

QQ群三:193078177

邮箱:news@22ba.com

地址:深圳市福田区金田路现代国际大厦2606