下拉菜单最终效果如图:
实现原理,通过绝对定位的方式,使下拉列表脱离文档流。通过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
最开始其他两种方式也可以通过这种形式实现:只需要修改一点点代码,就可以
笔者审美太低,样式太丑可以自行修改。