JavaScript实现下拉二级菜单详解

2023-04-08 12:59:12

下拉菜单最终效果如图:

在这里插入图片描述

实现原理,通过绝对定位的方式,使下拉列表脱离文档流。通过js或者css来控制鼠标移入后的效果
初始时可以改变
1.display:none;使其隐藏
2.height:0px;改变高度使其隐藏
–>加上下面代码可以实现菜单的上升下拉逐渐出现动画效果

transition: height 2s ease;

3.opacity:0;改变透明度使其隐藏
–>加上下面代码可以实现菜单的渐隐渐显动画效果

 transition: opacity 2s ease;

等等。。。

以下步骤可以实现二级菜单上升下拉逐渐出现的动画效果,上面其他两种方式可自行尝试

第一步 写html文档,构建页面的骨架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入css -->
    <link rel="stylesheet" href="index.css">
    <!-- 引入js -->
    <script src="index.js" defer></script>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">中心简介</a></li>
            <li><a href="#">工作动态</a></li>
            <li>
                <a href="#">规章制度</a>
               <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">中心简介</a></li>
                    <li><a href="#">工作动态</a></li>
               </ul>
            </li>
            <li><a href="#">实验平台</a></li>
            <li>
                <a href="#">教学成果</a>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">中心简介</a></li>
                    <li><a href="#">工作动态</a></li>
               </ul>
            </li>
            <li><a href="#">课程建设</a></li>
            <li><a href="#">资源管理</a></li>
            <li><a href="#">文案探讨</a></li>
        </ul>
    </div>
</body>
</html>

运行结果如图:(引入JavaScript时加入defer,使其在html文档加载完成后,在加载js代码,因为代码自上而下执行,避免先加载js,在js中获取不到html元素的信息)
在这里插入图片描述

第二步 写css样式,文件名(index.css)css来控制样式,使html变成大漂亮

代码主要实现:
1、清除li标签点的样式
2、横向布局,具体效果自定
3、使二级菜单绝对定位,相对于其父级元素
4、隐藏二级菜单,通过在文章开始说的三种基本方式。(以下是高度改变)
css代码:

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.nav{
    width: 80%;
    margin: 0 auto;
    background-color: red;
}
.nav>ul{
    display: flex;
    justify-content: space-between;
}
.nav>ul>li{
    width: 10%;
    text-align: center;
    position: relative;
}
.nav ul li{
    height: 43px;
    box-sizing: border-box;
}
.nav ul li a{
    text-decoration:none;
    color: aliceblue;
    /* 所有的a继承父级的宽度 */
    display: block;
    padding: 10px 0;
}
.nav ul li a:hover{
    background-color: aqua;
    border-bottom: 4px solid blueviolet;
}
.nav>ul>li>ul{
   /* 动画效果,当高度改变时,使其2s渐变 */
    transition: height 2s ease; 
    background-color: red;
    width: 100%;
    height: 0;
    overflow: hidden;
    position: absolute;
    top:40px;
}

运行结果:可以看的非常漂亮(大红色)十分显眼
在这里插入图片描述
上述css中最关键的是:给二级菜单绝对定位,给他父级相对定位,并且height: 0;overflow: hidden;使其初始的时候隐藏(overflow必须加)

.nav>ul>li{
    position: relative;
}
.nav>ul>li>ul{
    height: 0;
    overflow: hidden;
    position: absolute;
    top:40px;
}

如果只使用css来完成下拉菜单,可以通过加hover的形式,使其要变的二级菜单,通过hover的形式,改变height: 132px;的形式也可以

第三步写JavaScript文件(index.js),是上面下拉菜单有动态效果

代码主要实现:
1、在js里获取到一级菜单
2、写一个for循环,给每个一级菜单加上移入移出动作
3、判断当前移入的目标,改变高度显示二级菜单,移出时,高度重新为0,使其消失
代码如下:

var firstLi = document.querySelectorAll(".nav>ul>li");
// 通过循环给每个一级li标签都绑定鼠标移入事件
for(var i=0;i<firstLi.length;i++){
    firstLi[i].onmouseover=function(){
        if(this.querySelector("ul")){
            // firstLi[i]已经不是当前的了,this是当前的
            var secUL=this.querySelector("ul");
            // 获得当前二级菜单中的li标签个数
            var liLength=secUL.querySelectorAll('li').length;
            secUL.style.height=44*liLength+'px';
        }
    }

    firstLi[i].onmouseout=function(){
        if(this.querySelector("ul")){
            // firstLi[i]已经不是当前的了,this是当前的
            var secUL=this.querySelector("ul");
            secUL.style.height='0px';
        }
    }
}

根据二级菜单个数,来改变高度,增加代码健壮性,想加多个二级菜单时,不需要在修改js

最开始其他两种方式也可以通过这种形式实现:只需要修改一点点代码,就可以

笔者审美太低,样式太丑可以自行修改。

  • 作者:先给自己打个气
  • 原文链接:https://blog.csdn.net/qq_40641206/article/details/104301550
    更新时间:2023-04-08 12:59:12