手记

对 下拉菜单的3种实现方法(CSS3,JQuery,JS)的 理解和总结。

由于个人习惯把心得写在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" > 
      <!--引用JQuery 库文件--> 
      <script type="text/javascript" src="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" >
      <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" > 
      <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 ">
      <p><br/>
    *过渡动画的速度都设置得很慢,尝试不停的移动鼠标,来激活onmouseover和onmouseout事件,观察差异。*</p>
      <p >JQuery:会先执行完一个过渡动画,再执行另一个动画。所以在鼠标不停切换事件时,会先登记动画效果,再按这些顺序来进行逐一播放。所以会有很明显的延迟。</p>
      <p ">CSS3:实现过渡效果的样式属性-transition。此方法可以做到即时响应,在一个事件触发时,会先结束上一个事件的动画。但是动画的起点样式和终点样式的属性不能使用“auto”,必须是指定的值。</p>
      <p ">JS:也可以做到即时响应。而且可以做到更多更复杂的效果。但代码量较多。</p>
    </div>
</body>
</html>

效果图如下:

5人推荐
随时随地看视频
慕课网APP

热门评论

同上,看不了啊!!!!!!!!!!!!!!!

复制不了,看不了效果

查看全部评论