首页手记对...

对下拉菜单的3种实现方法（CSS3，JQuery，JS）的理解和总结。

标签：

Html/CSS JavaScript CSS3

由于个人习惯把心得写在html文件中，所以就不另外写了。
请直接复制代码，在网页中查看效果。

代码部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>下拉子菜单</title>
    <style>
/*样式初始化*/

* {
    margin: 0px;
    padding: 0px;
}
/* 第一个下拉菜单 */
.menu_1 li {
    list-style: none;
    font-size: 25px;
    line-height: 30px;
    margin: 1px 10px;
    padding: 5px;
    width: 100px;
    background-color: #FC9;
    color: #FFF;
}
.menu_1 li:hover {
    background-color: #F60;
}
.menu_1>ul>li {
    position: relative;
    float: left;
    display: block;
}
.menu_1>ul>li>ul {
    position: absolute;
    top: 40px;
    left: -10px;
    height: auto;
    display: none;/* 这里 Display 的属性为隐藏，在JQuery执行时，会使元素显示 */
}
/* 第二个下拉菜单 */
.menu_2 li {
    list-style: none;
    font-size: 25px;
    line-height: 30px;
    margin: 1px 10px;
    padding: 5px;
    width: 100px;
    background-color: #6CF;
    color: #FFF;
}
.menu_2 li:hover {
    background-color: #06F;
}
.menu_2>ul>li {
    position: relative;
    float: left;
    display: block;
}
.menu_2>ul>li>ul {
    position: absolute;
    top: 40px;
    left: -10px;
    height: 0px;
    overflow: hidden;
    /*
        通过CSS方法产生过渡效果；
        */
    transition: all ease-in-out 2s 0s;
}
.menu_2>ul>li:hover>ul {
    /*
            如果执行：height: 200px; 可看到过渡效果（transition）。
            但因为高度是固定的，当鼠标超出元素的范围，但又未超过极限高度200px时，依然处于激活状态。
            执行：height: auto; 鼠标可以正确地激活元素的准确位置。但会使过渡效果失效（transition）。
            */
    height: 200px;
}
/* 第三个下拉菜单 */
.menu_3 li {
    list-style: none;
    font-size: 25px;
    line-height: 30px;
    margin: 1px 10px;
    padding: 5px;
    width: 100px;
    background-color: #0C9;
    color: #FFF;
}
.menu_3 li:hover {
    background-color: #090;
}
.menu_3>ul>li {
    position: relative;
    float: left;
    display: block;
}
.menu_3>ul>li>ul {
    position: absolute;
    top: 40px;
    left: -10px;
    height: 0px;
    overflow: hidden;
}
</style>
    </head>

    <body>
<!-- 第一个下拉菜单 -->
<div class="menu_1" style="margin:20px;"> 
      <!--引用JQuery 库文件--> 
      <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js">
        </script> 
      <script>
        <!-- $(document).ready 表示所有的元素都加载完毕 -->
        $(document).ready(function () {
            $(".menu_1>ul>li").mouseover(function () {
                $(this).children("ul").slideDown(2000);
            });
            $(".menu_1>ul>li").mouseleave(function () {
                $(this).children("ul").slideUp(2000);
            });
        });
        </script>
      <ul>
    <li>L1
          <ul>
        <li>L1_1</li>
        <li>L1_2</li>
        <li>L1_3</li>
        <li>L1_4</li>
      </ul>
        </li>
    <li>L2
          <ul>
        <li>L2_1</li>
        <li>L2_2</li>
        <li>L2_3</li>
        <li>L2_4</li>
        <li>L2_5</li>
      </ul>
        </li>
    <li>L3
          <ul>
        <li>L3_1</li>
      </ul>
        </li>
  </ul>
    </div>
<!-- 第二个下拉菜单 -->
<div class="menu_2" style="margin:20px;">
      <ul>
    <li>L1
          <ul>
        <li>L1_1</li>
        <li>L1_2</li>
        <li>L1_3</li>
        <li>L1_4</li>
      </ul>
        </li>
    <li>L2
          <ul>
        <li>L2_1</li>
        <li>L2_2</li>
        <li>L2_3</li>
        <li>L2_4</li>
        <li>L2_5</li>
      </ul>
        </li>
    <li>L3
          <ul>
        <li>L3_1</li>
      </ul>
        </li>
  </ul>
    </div>
<!-- 第三个下拉菜单 -->
<div class="menu_3" style="margin:20px;"> 
      <script type="text/javascript">
        window.onload = function () {
            var navs = document.getElementsByClassName("nav");
            var changespeed = 1;
            var changedelay = 20;
            /* 循环绑定所有元素的鼠标事件 */
            for(var i = 0; i < navs.length; i++) {
                navs[i].onmouseover = function () {
                    var U = this.getElementsByTagName("ul")[0];
                    if(U != undefined) {
                        /*
                        documet.children.length 会获得所有子节点的个数;
                        42 为 样式中每个li的高度；
                        两者的乘积就是这个ul的内容高度，可以实现高度自动适应；
                        U.style.height = 42 * (U.children.length) + "px";
                        */
                        /* 先终止对立的动画 */
                        clearInterval(U.t2);
                        U.t = setInterval(function () {
                            if(U.offsetHeight < (42 * U.children.length)) {
                                U.style.height = U.offsetHeight + changespeed + "px";
                            }
                            else {
                                clearInterval(U.t);
                            }
                        }, changedelay);
                    }
                }
                navs[i].onmouseout = function () {
                    var U = this.getElementsByTagName("ul")[0];
                    if(U != undefined) {
                        clearInterval(U.t);
                        U.t2 = setInterval(function () {
                            if(U.offsetHeight > 0) {
                                U.style.height = U.offsetHeight - changespeed + "px";
                            }
                            else {
                                clearInterval(U.t2);
                            }
                        }, changedelay);
                    }
                }
            }
        }
        </script>
      <ul>
    <li class="nav">L1
          <ul>
        <li>L1_1</li>
        <li>L1_2</li>
        <li>L1_3</li>
        <li>L1_4</li>
      </ul>
        </li>
    <li class="nav">L2
          <ul>
        <li>L2_1</li>
        <li>L2_2</li>
        <li>L2_3</li>
        <li>L2_4</li>
        <li>L2_5</li>
      </ul>
        </li>
    <li class="nav">L3
          <ul>
        <li>L3_1</li>
      </ul>
        </li>
  </ul>
    </div>
<div style="clear:both;font-size:45px; margin:20px;"">
      <p><br/>
    *过渡动画的速度都设置得很慢，尝试不停的移动鼠标，来激活onmouseover和onmouseout事件，观察差异。*</p>
      <p style="background-color: #FC9; margin:20px;">JQuery：会先执行完一个过渡动画，再执行另一个动画。所以在鼠标不停切换事件时，会先登记动画效果，再按这些顺序来进行逐一播放。所以会有很明显的延迟。</p>
      <p style="background-color: #6CF; margin:20px;"">CSS3：实现过渡效果的样式属性-transition。此方法可以做到即时响应，在一个事件触发时，会先结束上一个事件的动画。但是动画的起点样式和终点样式的属性不能使用“auto”，必须是指定的值。</p>
      <p style="background-color: #0C9; margin:20px;"">JS：也可以做到即时响应。而且可以做到更多更复杂的效果。但代码量较多。</p>
    </div>
</body>
</html>

效果图如下：