2014年3月27日星期四

[]二级JS下拉菜单（可轻松扩展成多级下拉菜单） - 网页特效代码 - 创想工作室

本文自动转发自我的博客: http://www.haofengjing.org/2578.html

花了一点时间把原来的代码做了一点修改，搞了一个简易版 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>


发帖者 时间：

1 条评论:

  1. William Anderson2016年8月28日 23:26:00

    Talk to family members, friends, and also attorneys in regards to the divorce law firms they may have used. The info that you're going to receive from them will help you find the appropriate divorce attorney. Whenever one or two becomes married they will never ever foresee finding yourself receiving a divorce. Sadly, divorce has grown to be more and more frequent in our society, and then there is actually less of a judgment attached to that. Even so, it is usually a challenging and emotive journey.
    divorce lawyers
    The very thought of concluding a single part of their own every day life is frustrating, causing much distress and frustration. The final thing the people need to handle will be the find a divorce attorney. Those who will be experiencing a divorce will most likely discover that they are coping with a really difficult along with emotive circumstance. Thinking about concluding 1 part of their own life is demoralizing, leading to a lot stress as well as distress.

    回复删除

订阅： 博文评论 (Atom)