本周学习的弹出菜单，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.nav{
list-style: none; margin: 0;
padding: 0; font-size: 0;
width: 1000px;
}
.nav li{
display: inline-block; font-size: 16px;
background-color: #abc88b;
width:100px; text-align: center;
position: relative;
}
.nav li a{
display: block; padding: 5px 10px;
color: #020; text-decoration: none;
line-height: 30px;
}
.nav li a:hover{
background-color: #1d953f; color: white;
}
.nav li > .nav.pop-menu{
display: none; position: absolute;
width: 100px; overflow: hidden;
}
@keyframes fadeln{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.nav li>.nav.pop-menu.pop{
display: block;
animation: fadeln 500ms linear 1;
}
.nav li>.nav.pop-menu#gaikuang{
height: 400px;
/*每个弹出项高40px,10个共高400px,下同*/
}
.nav li>.nav.pop-menu#jigou{
height: 240px;
}
</style>
</head>
<body>
<ul class="nav" id="nav01">
<li><a href="#" >首页</a></li>
<li>
<a href="#" onmouseover="popMenu()">学校概况</a>
<ul class="nav pop-menu" id="gaikuang">
<li><a href="#">学校简介</a></li>
<li><a href="#">历史沿革</a></li>
<li><a href="#">现任领导</a></li>
<li><a href="#">学校章程</a></li>
<li><a href="#">学校视频</a></li>
<li><a href="#">校训校风</a></li>
<li><a href="#">校徽校歌</a></li>
<li><a href="#">教风学风</a></li>
<li><a href="#">校历</a></li>
<li><a href="#">校园风光</a></li>
</ul>
</li>
<li>
<a href="#" onmouseover="popMenu()">机构设置</a>
<ul class="nav pop-menu" id="jigou">
<li><a href="#">党群机构</a></li>
<li><a href="#">行政机构</a></li>
<li><a href="#">教学院部</a></li>
<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>
<li><a href="#">智慧校园</a></li>
<li><a href="#">校长信箱</a></li>
<li><a href="#">双湖新闻</a></li>
<li><a href="#">信息公开</a></li>
</ul>
<script type="text/javascript">
window.onload = function(){
var subMenus = document.querySelectorAll(".nav.pop-menu");
let i;
for(i = 0;i<subMenus.length;i++){
let allAnchors = subMenus[i].querySelectorAll("a");
for(let item of allAnchors){
item.onclick=function(){
let popMenu = this.closest("pop-menu");
popMenu.classList.remove("pop");
}
}
subMenus[i].addEventListener("mouseleave",function(){
this.classList.remove("pop");
});
}
}
function popMenu(){
var allPop = document.querySelectorAll(".nav.pop-menu.pop");
if(allPop.length>0){
for(let k = 0;k<allPop.length;k++) allPop[k].classList.remove("pop");
}
var menuItem = event.target.parentNode;
var targetSubMenu = menuItem.querySelector(".nav.pop-menu");
if(targetSubMenu) targetSubMenu.classList.add("pop");
}
</script>
</body>
</html>
