本周學(xué)習(xí)的彈出菜單，代碼如下：
<!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()">學(xué)校概況</a>
<ul class="nav pop-menu" id="gaikuang">
<li><a href="#">學(xué)校簡介</a></li>
<li><a href="#">歷史沿革</a></li>
<li><a href="#">現(xiàn)任領(lǐng)導(dǎo)</a></li>
<li><a href="#">學(xué)校章程</a></li>
<li><a href="#">學(xué)校視頻</a></li>
<li><a href="#">校訓(xùn)校風(fēng)</a></li>
<li><a href="#">?；招８?lt;/a></li>
<li><a href="#">教風(fēng)學(xué)風(fēng)</a></li>
<li><a href="#">校歷</a></li>
<li><a href="#">校園風(fēng)光</a></li>
</ul>
</li>
<li>
<a href="#" onmouseover="popMenu()">機構(gòu)設(shè)置</a>
<ul class="nav pop-menu" id="jigou">
<li><a href="#">黨群機構(gòu)</a></li>
<li><a href="#">行政機構(gòu)</a></li>
<li><a href="#">教學(xué)院部</a></li>
<li><a href="#">教輔機構(gòu)</a></li>
<li><a href="#">直屬機構(gòu)</a></li>
<li><a href="#">附屬單位</a></li>
</ul>
</li>
<li><a href="#">學(xué)科建設(shè)</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">招生就業(yè)</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>
