形形色色的下拉菜单（课后总结2）

最新推荐文章于 2021-02-03 11:31:42 发布

sinat_34389693

最新推荐文章于 2021-02-03 11:31:42 发布

阅读量526

点赞数

分类专栏：慕课课程总结

本文链接：https://blog.csdn.net/sinat_34389693/article/details/75901307

版权

慕课课程总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用jQuery实现动态下拉菜单

使用jQuery实现动态的下拉菜单是最简单的方法。首先我们先来实现一个二级菜单的HTML部分。

body>
<div id="menu">
    <ul  id="nav">
        <li class="mainlevel"><span class="note"></span><a href="#"></a>首页</li>
        <li class="mainlevel" id="mainlevel_01"><a href="#"></a>学习中心
            <ul id="sub_nav_01" >
                <span class="triangle_con"></span>
                <li>前端</li>
                <li>后端</li>
                <li>数据库</li>
            </ul>

        </li>
        <li class="mainlevel" id="mainlevel_02"><a href="#"></a>课程大厅
            <ul id="sub-nav_02">
                <span class="triangle_con"></span>
                <li>JavaScript</li>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </li>
        <li class="mainlevel"><a href="#"></a>经典案例</li>
        <li class="mainlevel"><a href="#"></a>关于我们</li>


    </ul>


</div>
</body>

之后的jQuery部分如下：

   <script type="text/javascript">   
        $(document).ready(function(){
            $(".mainlevel").mouseover(function(){
                $(this).children("ul").slideDown("slow");
            });

            $(".mainlevel").mouseleave(function(){
                $(this).children("ul").slideUp("slow");
            });
        });
    </script>

在这里要注意的是find()函数和children()函数的区别。find()函数是找到所有符合条件的元素，不管是直接孩子还是孙子，还是曾孙子。而children()函数是只找符合条件的直接儿子。

使用JavaScript实现动态的下拉菜单

JavaScript实现动态下拉菜单的HTML部分的代码和jQuery部分是一样的：

body>
<div id="menu">
    <ul  id="nav">
        <li class="mainlevel"><span class="note"></span><a href="#"></a>首页</li>
        <li class="mainlevel" id="mainlevel_01"><a href="#"></a>学习中心
            <ul id="sub_nav_01" > 
            <!--因为要通过getElementById，所以首先要先为二级的ul设置id-->
                <span class="triangle_con"></span>
                <li>前端</li>
                <li>后端</li>
                <li>数据库</li>
            </ul>

        </li>
        <li class="mainlevel" id="mainlevel_02"><a href="#"></a>课程大厅
            <ul id="sub-nav_02">
                <span class="triangle_con"></span>
                <li>JavaScript</li>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </li>
        <li class="mainlevel"><a href="#"></a>经典案例</li>
        <li class="mainlevel"><a href="#"></a>关于我们</li>


    </ul>


</div>
</body>

因为要在后来的JS代码中药通过getElementById来获取二级菜单的ul，所以要先为二级菜单设置id。

在实现JS的代码之前，CSS代码中有一点是要注意的：

 #nav .mainlevel ul{
            display: none;
            height:0;
         //  需要把高度初始化设置为0 ，否则后来的AddH函数就无法正常实现 
            overflow: hidden;

        }

之后的JS的实现代码：

<script type="text/javascript">

        window.onload = function(){     //在页面加载完毕的时候动态绑定事件，这样就不用为每一个li都添加一个专门的事件了。
            var Lis = document.getElementsByTagName("li");
            Lis[0].style.color="white";
            for(var i=0;i<Lis.length;i++)
            {
                Lis[i].onmouseover = function()
                {
                    var u =this.getElementsByTagName("ul")[0];
                    if(u !=undefined){
         //首先要判断，因为不是所有的 <li>标签下都是有<ul>标签的，否则浏览器会报错
                        u.style.display = "block";
         //因为在之前的CSS初始化的设置中的，display属性是none，即隐藏的。
                        AddH(u.id);
              //调用AddH（）来实现动态的加载。
                    }
                }
                Lis[i].onmouseleave = function(){
                    var u = this.getElementsByTagName("ul")[0];
                    if(u !=undefined){
                        SubH(u.id);
                     //这就是先前要先给二级菜单设置id的原因。
                    }

                }
            }
        }

        function AddH(id){
            var ulList = document.getElementById(id);
            var h=ulList.offsetHeight;//offsetHeight??
            h+=1;
            if(h<66){
                ulList.style.height =h+"px";
                setTimeout("AddH('"+id+"')",10);
                //每隔一段时间就调用自身函数。
            }
            else
                return;
        }
        function SubH(id){

            var ulList = document.getElementById(id);
            var h=ulList.offsetHeight;//offsetHeight??
            h-=1;
            if(h>0){
                ulList.style.height =h+"px";
                setTimeout("SubH('"+id+"')",10);
            }
            else
            {
                ulList.style.display="none";
              //和AddH()函数稍微有点区别的就是，在结束了SubH的调用之后要把display设置还原成none
                return ;
            }

        }

    </script>

使用CSS3来实现动态下拉菜单

主体的html部分代码如下,为三级菜单：

<div >
    <ul class="top-nav">
        <li ><a href="#">首页</a></li>
        <li><a href="#">学习中心</a>
            <ul>
                <li><a href="#">JavaScript+</a>

                    <ul>
                        <li><a href="#">123</a></li>
                        <li><a href="#">123</a></li>
                        <li><a href="#">123</a></li>
                        <li><a href="#">123</a></li>

                    </ul>

                </li>
                <li><a href="#">JQuery</a></li>
            </ul>

        </li>
        <li><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">JQuery</a></li>
            </ul>


        </li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>


    </ul>

</div>

其中主要用到的CSS3的属性有：
1、 border-radius 实现下拉菜单的圆角属性
2、 box-shadow 实现下来菜单的阴影
3、 background-image 除了可以添加背景图片的url之外，还可以实现渐变的效果
4、 transition 实现动态过渡的效果
5、这个案例中使用了一些HTML和CSS的小技巧，实现了箭头的小三角的效果

具体的CSS代码如下：

 <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        .top-nav{
            width:960px;
            margin:60px auto;
            color:#999999;
            border:1px solid #222;
            background-color: #111;
            background-image: linear-gradient(#444,#111);
        /*使用线性渐变创建了背景图片*/
            border-radius: 6px;
        /*使用border-radius创建了6px的圆角*/
            box-shadow:0 1px 1px #777;
        /*使用box-shadow 属性为列表创建了阴影*/
            padding:0;
            list-style: none;

            /*overflow: hidden;*/
            /*visibility:和display的效果一样吗;*/
            /*???*/
        }
        .top-nav:before , .top-nav:after{
            content: " ";
            display: table;
 /* 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。/
        }
        .top-nav:after{
            clear: both;
        }
     /*以上两个属性是为了消除float属性的影响*/
        .top-nav >li{
            float: left;
            border-right: 1px solid #222;
            box-shadow: 1px 0 0 #444;
            position: relative;
            list-style: none;

        }

        .top-nav li a {
            float: left;
            padding:12px 30px;
            color: #999;
            font:bold 12px;
            text-decoration: none;
            text-shadow: 0 1px 0 #000;

        }
        .top-nav li a:hover{
            color:#fafafa;

        }
        .top-nav li ul{
            /*display: none;*/
            visibility: hidden;
            position:absolute;
            top:38px;
            left:0;
            z-index: 100;
            padding:0;
            background-color: #444;
            background-image: linear-gradient(#444,#111);
            box-shadow:0 -1px 0 rgba(255,255,255,.3);
            border-radius: 3px;
            opacity:0;
            margin:20px 0 0 0;
            transition:all .2s ease-in-out;

        }
        .top-nav li:hover > ul{
            /*>是选择子一级的菜单，但是不会选择孙子，曾孙子等之后的ul元素*/
            opacity: 1;
            visibility: visible;
            margin:0;
        }
        .top-nav ul li{
            float: none;
            display: block;
            border:0;
            box-shadow: 0 1px 0 #111 ,0 2px 0 #666;
            /*这个是实现了阴影的叠加*/

        }
        .top-nav ul a {
            padding:10px;
            width:130px;
            display: block;
            float: none;
        }
        .top-nav ul a:hover{
            background-color: #0186ba;
            background-image:linear-gradient(#04acec,#0186ba) ;

        }
        .top-nav ul li:first-child > a{
       /*选择属于父元素的第一个子元素的每个 <p> 元素。*/ 
            border-radius: 3px 3px 0 0 ;
        }
        .top-nav ul li:last-child > a{

            border-radius:0 0 3px 3px;
        }
        .top-nav  ul li:first-child > a:before{
            /*before就是在元素之前添加内容*/
            /*after就是在元素之后添加内容*/
            content:" ";
            position: absolute;
            left:40px;
            top:-6px;
            /*因为边框三角是6px*/
            border-left:6px solid transparent;
  /*将左右底的边框设置为透明没有颜色，就只剩下顶部的三角了*/
            border-right: 6px solid transparent;
            border-bottom: 6px solid #444;
            /*以上是实现了箭头三角的代码*/

        }
        .top-nav ul li:first-child > a:hover:before{
            border-bottom-color: #04acec;
            /*为三角设置颜色*/
        }
        .top-nav ul ul{
            top:0;
            left:150px;
            margin:0 0 0 20px;
            box-shadow: -1px 0 rgba(255,255,255,.3);

        }

        .top-nav ul ul li:first-child  a:before{
            left:-6px;
            top:10%;
            margin-top: -6px;
            border-left:0;
            border-bottom: 6px solid transparent;
            border-top: 6px solid transparent;
            border-right: 6px solid #3b3b3b;
        }
        .top-nav ul ul li:first-child a:hover:before{
            border-bottom-color: transparent;
            /*清除继承过来的属性*/
            border-right-color:#0299d3;
        }
    </style>

难点：

1、为什么要清除浮动？怎么清除浮动？

当所有的子元素都设置了浮动之后，不占据位置，从而导致父元素没有高度，这时候就需要清除浮动。清除浮动就是消除浮动的影响。

清除浮动的方法：
（1）直接给父元素设置高度
（2）给父元素设置overflow：hidden （这里面涉及到BFC）
（3）使用clear：left | right | both
Clear：可以认为设置了clear属性的元素，不能被浮动的元素覆盖

Left：不允许左边有浮动元素

Right：不允许右边有浮动元素

Both：两边都不允许

用clear 属性清除浮动得到的效果不会涉及到别的元素，只对当前设置元素生效

给父元素添加一个子元素 div ，放在最后面，设置clear：both；

使用单伪元素清除浮动（这个方法是必须掌握的）即ClearFix方法

.clearfix:after{
       Content：””;(这个属性必须有)
       Clear:both;
       Display:block;
       Visibility:hidden;
       Height:0;
       Line-height:0;     }

Overflow的用法：

Overflow：visible 默认值超出部分可见

Overflow：hidden 将超出部分隐藏

Overflow：scroll 添加滚动条

Overflow：auto 自动设置滚动条

2、使用CSS和HTML实现三角箭头

原理：给一个div设置边框，
border-top:6px solid color1;
border-right:6px solid color2;
border-bottom:6px solid color3;
border-right:6px solid color4;

div 有内容时

div 没内容时

这时，如果把不需要的三角的颜色设置成transparent透明，就可以实现只剩下一个三角的效果了。

3、display和visibility的区别

display通常可以设置为none、inline、block
visibility通常可以设置为hidden、visible

当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。

display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。

visibility属性是隐藏元素但保持元素的浮动位置，即仍然占据原来的位置，而display实际上是设置元素的浮动特征。

当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。
将display设置为inline，将使其行为和元素inline一样—即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。
display被设置：none，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。（此时应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。）

课程代码：LinQuQu_github