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

来源：互联网发布：新风系统知乎编辑：程序博客网时间：2024/05/20 14:24

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>

课程代码:Lin-QuQu_github

阅读全文

0 0