JavaScript实现二级菜单
二级菜单效果图
核心思路
使用div+css写好布局,然后通过javascript脚本语言 通过类名获取 myHeaderInfoStyle
控制显示获取的子元素添加鼠标入事件，鼠标移出事件的 ，子菜单也是如此
布局文件代码
<div class="myHeaderStyle">
<div class="myHeaderInfoStyle">
学校概况
</div>
<div class="myHeaderInfoStyle">
国际合作
<ul class="myChildren">
<li class="myChildLiStyle">国际交流
<ul class="subMenu">
<li class="myChildUlLiStyle myliStyle">留校讲座</li>
<li class="myChildUlLiStyle myliStyle">合作院校</li>
<li class="myChildUlLiStyle myliStyle">交换申请</li>
<li class="myChildUlLiStyle myliStyle">交换申请</li>
</ul>
</li>
<li class="myChildLiStyle">一带一路</li>
<li class="myChildLiStyle">孔子学院</li>
<li class="myChildLiStyle">留学交换</li>
<li class="myChildLiStyle">国际学院</li>
</ul>
</div>
<div class="myHeaderInfoStyle">
院系部门
</div>
<div class="myHeaderInfoStyle">
招生就业
</div>
<div class="myHeaderInfoStyle">
公共服务
</div>
<div class="myHeaderInfoStyle">
校友工作
</div>
</div>
样式代码
<style>
body {
margin: 0 auto;
display: flex;
}
.myHeaderStyle {
width: 100%;
height: 50px;
border: 0px solid rgb(118, 184, 243);
background: rgb(17, 128, 240);
}
.myHeaderInfoStyle {
display: inline-block;
line-height: 50px;
text-align: center;
width: 200px;
height: 100%;
position: relative; /* 添加相对定位 */
}
.myHeaderInfoStyle:hover {
background-color: chartreuse;
}
.myChildren {
display: none;
position: absolute; /* 添加绝对定位 */
top: 100%; /* 位于父元素下方 */
left: 0;
background-color: rgb(24, 199, 155);
list-style-type: none;
padding: 0;
margin: 0;
}
.myChildren li {
display: block;
padding: 5px 10px;
}
.myChildren li:hover {
background-color: rgb(87, 247, 225);
}
.subMenu {
display: none;
position: absolute;
top: 0;
left: 100%; /* 位于父元素右侧 */
background-color: rgb(21, 172, 243);
list-style-type: none;
padding: 0;
margin: 0;
}
.subMenu li {
display: block;
padding: 5px 10px;
}
.subMenu li:hover {
background-color: rgb(196, 245, 238);
}
.myliStyle{
width: 200px;
height: 50px;
background: rgb(176, 205, 235);
}
.myChildLiStyle{
width: 200px;
height: 50px;
}
</style>
javaScript代码
<script>
// 获取所有 .myHeaderInfoStyle 元素
let myHeaderInfoStyles = document.getElementsByClassName("myHeaderInfoStyle");
// 遍历每个 .myHeaderInfoStyle 元素并添加鼠标悬停事件监听器
for (let i = 0; i < myHeaderInfoStyles.length; i++) {
const headerInfo = myHeaderInfoStyles[i];
headerInfo.addEventListener("mouseover", function() {
// 获取当前元素的 .myChildren 元素
let myChildren = this.querySelector(".myChildren");
myChildren.style.display = "block";
});
headerInfo.addEventListener("mouseout", function() {
// 获取当前元素的 .myChildren 元素
let myChildren = this.querySelector(".myChildren");
myChildren.style.display = "none";
});
}
// 获取所有 .myChildLiStyle 元素
let myChildLiStyles = document.querySelectorAll(".myChildLiStyle");
// 遍历每个 .myChildLiStyle 元素并添加鼠标悬停事件监听器
myChildLiStyles.forEach(childLi => {
childLi.addEventListener("mouseover", function() {
// 获取当前点击元素的 .subMenu 元素
let subMenu = this.querySelector(".subMenu");
subMenu.style.display = "block";
});
childLi.addEventListener("mouseout", function() {
// 获取当前点击元素的 .subMenu 元素
let subMenu = this.querySelector(".subMenu");
subMenu.style.display = "none";
});
});
</script>
完整代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0 auto;display: flex;}.myHeaderStyle {width: 100%;height: 50px;border: 0px solid rgb(118, 184, 243);background: rgb(17, 128, 240);}.myHeaderInfoStyle {display: inline-block;line-height: 50px;text-align: center;width: 200px;height: 100%;position: relative; /* 添加相对定位 */}.myHeaderInfoStyle:hover {background-color: chartreuse;}.myChildren {display: none;position: absolute; /* 添加绝对定位 */top: 100%; /* 位于父元素下方 */left: 0;background-color: rgb(24, 199, 155);list-style-type: none;padding: 0;margin: 0;}.myChildren li {display: block;padding: 5px 10px;}.myChildren li:hover {background-color: rgb(87, 247, 225);}.subMenu {display: none;position: absolute;top: 0;left: 100%; /* 位于父元素右侧 */background-color: rgb(21, 172, 243);list-style-type: none;padding: 0;margin: 0;}.subMenu li {display: block;padding: 5px 10px;}.subMenu li:hover {background-color: rgb(196, 245, 238);}.myliStyle{width: 200px;height: 50px;background: rgb(176, 205, 235);}.myChildLiStyle{width: 200px;height: 50px;}</style> </head> <body ><div class="myHeaderStyle"><div class="myHeaderInfoStyle">学校概况</div><div class="myHeaderInfoStyle">国际合作<ul class="myChildren"><li class="myChildLiStyle">国际交流<ul class="subMenu"><li class="myChildUlLiStyle myliStyle">留校讲座</li><li class="myChildUlLiStyle myliStyle">合作院校</li><li class="myChildUlLiStyle myliStyle">交换申请</li><li class="myChildUlLiStyle myliStyle">交换申请</li></ul></li><li class="myChildLiStyle">一带一路</li><li class="myChildLiStyle">孔子学院</li><li class="myChildLiStyle">留学交换</li><li class="myChildLiStyle">国际学院</li></ul></div><div class="myHeaderInfoStyle">院系部门</div><div class="myHeaderInfoStyle">招生就业</div><div class="myHeaderInfoStyle">公共服务</div><div class="myHeaderInfoStyle">校友工作</div></div><script>// 获取所有 .myHeaderInfoStyle 元素let myHeaderInfoStyles = document.getElementsByClassName("myHeaderInfoStyle");// 遍历每个 .myHeaderInfoStyle 元素并添加鼠标悬停事件监听器for (let i = 0; i < myHeaderInfoStyles.length; i++) {const headerInfo = myHeaderInfoStyles[i];headerInfo.addEventListener("mouseover", function() {// 获取当前元素的 .myChildren 元素let myChildren = this.querySelector(".myChildren");myChildren.style.display = "block";});headerInfo.addEventListener("mouseout", function() {// 获取当前元素的 .myChildren 元素let myChildren = this.querySelector(".myChildren");myChildren.style.display = "none";});}// 获取所有 .myChildLiStyle 元素let myChildLiStyles = document.querySelectorAll(".myChildLiStyle");// 遍历每个 .myChildLiStyle 元素并添加鼠标悬停事件监听器myChildLiStyles.forEach(childLi => {childLi.addEventListener("mouseover", function() {// 获取当前点击元素的 .subMenu 元素let subMenu = this.querySelector(".subMenu");subMenu.style.display = "block";});childLi.addEventListener("mouseout", function() {// 获取当前点击元素的 .subMenu 元素let subMenu = this.querySelector(".subMenu");subMenu.style.display = "none";});});</script> </body> </html>