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

最新推荐文章于 2021-04-16 21:45:53 发布

sinat_34389693

最新推荐文章于 2021-04-16 21:45:53 发布

阅读量334

点赞数

分类专栏：慕课课程总结

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

版权

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

5 篇文章 0 订阅

订阅专栏

jQuery实现二级菜单横向切换

这里写图片描述

以下为完整代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
        $(function(){
            $("#menuList").on("click","a",function(){
                   var curIndex = $(this).index();
                   //获取当前点击的<a>标签的序号
               var mlValue = "-" + curIndex*100 + "%";
                   //设置marginLeft值，实现横向偏移

        //先要判断二级菜单原本是不是展开的，通过设置虚拟的“active”类来区别
               if($("#expandZone").hasClass("active")){
                   $("#expandZone .expdiv").animate({marginLeft:mlValue});
               }
               else {
                   $("#expandZone .expdiv").css({marginLeft: mlValue});
                   $("#expandZone").animate({height: "140px"}).addClass("active");
                }
               });
        });


    </script>

    <style type="text/css">
        .navlist{

            position:absolute;
            top:20px;
        }
        a{
            text-decoration: none;
            color: white;
        }
        .navlist a{
            margin-left: 60px;
            color:#666
        }
        .expand{
            height:0;
            background-color:brown;
            overflow: hidden;
            position: relative;
            top:40px;
            width:100%;
            /*就是一个屏幕的宽度*/
        }
        .expdiv{
            height:140px;
            width:500%;
            /*因为有五项二级菜单*/
        }
        .expdiv-list{

            width:20%;
            /*这样，一项二级菜单的宽度正好是100%，即一个屏幕的宽度*/
            text-align: center;
            float: left;
            line-height:140px;
            color:white;
        }

        .expand .close
    </style>


</head>

<body>
<div id="menuList" class="navlist">
    <a href="#">首页</a>
    <a href="#">课程大厅</a>
    <a href="#">学习中心</a>
    <a href="#">个人中心</a>
    <a href="#">关于我们</a>
</div>
<div  id="expandZone" class="expand">
    <div class="expdiv">
        <div class="expdiv-list">
            <a href="#">慕课网首页</a>
        </div>
        <div class="expdiv-list">
            <a href="#">前端课程</a>
            <a href="#">前端课程</a>
            <a href="#">前端课程</a>
        </div>
        <div class="expdiv-list">
            <a href="#">学习</a>
            <a href="#">学习</a>
            <a href="#">学习</a>
            <a href="#">学习</a>
        </div>
        <div class="expdiv-list">
            <a href="#">个人</a>
            <a href="#">kakak</a>
        </div>
        <div class="expdiv-list">
            <a href="#">nsfl</a>
            <a href="#">mxskfh</a>
        </div>

    </div>
    <div id="closeBtn">

    </div>

</div>

</body>
</html>

响应式菜单

所谓的响应式菜单，其实就是通过css的媒体查询（@media）来实现在不同的分辨率下呈现不同的css样式。bootstrap的栅格系统其实也是通过这个来实现的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
          //这里的jquery代码是为了实现，在小屏的时候，通过     按钮来收放下拉菜单的功能
        $(document).ready(function(){
            $("#rList").on("click",function(){
                if($("ul li").hasClass("active")){
                    $("ul li").css("visibility","hidden").removeClass("active");
                }
                else{
                    $("ul li").css("visibility","visible").addClass("active");
                }
            });

        });
    </script>

    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            margin:0 auto;
        }
        a{
            text-align: center;
            text-decoration: none;
            color:white;
            font-size:14px;
            padding:0 3px;
            display:block;
        }
        .menu li{
            display: block;
            float: left;
            margin:3px;
            background-color: #999999;
            width:140px;
            text-align: center;
            color:white;
            font-size:14px;
            height:40px;
            line-height: 40px;
        }
        #logo{
            background: white;
            width:230px;

        }
        #logo a{
            color: #000;
            font-size:35pt;
            background-color: white;
        }
        #toplogo{
            display: none;
            margin:0 auto;
            text-align: center;


        }
        #toplogo a{
            color:black;
            font-size:35pt;
        }
        .rMenu{
            display: none;
            content: " ";
            border-top:15px solid orange;
            border-bottom: 15px solid greenyellow;
            border-right:15px solid palevioletred;
            border-left:15px solid cornflowerblue;

        }

        @media only screen and (min-width: 585px)and (max-width: 823px){
        /*当宽度在585px 和 823px之间的时候，呈现如下的css样式*/
            #logo{
                display: none;

            }
            #toplogo{
                display: block;
                width: 100%;
            }
            .menu{
                width:585px;
            }
        }

        @media only screen and (max-width:585px){
        /*当屏幕的宽度小于585px时，呈现的是如下的css样式*/
            #logo{
                display: none;
            }

            #toplogo{
                display: block;
            }

            .menu{
                width:100%;
            }
            .menu li{
                width:100%;
                visibility: hidden;
            }
            .rMenu{
                display: block;
                float: right;

            }

        }
    </style>
</head>
<body>
    <ul class="menu">
        <div id="toplogo">
            <a href="">MOOC</a>
            <a href="#" class="rMenu" id="rList"></a>
        </div>
        <li><a href="#">课程大厅</a></li>
        <li><a href="#">学习中心</a></li>
        <li id="logo"><a href="#">Mooc</a></li>
        <li><a href="#">个人中心</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</body>
</html>