摘要：通過ul進(jìn)行靜態(tài)頁(yè)面的導(dǎo)航菜單及子菜單的布局，利用jQuery的hide() mouseenter mouseover mouseleave find() slideDown slideUp等方法實(shí)現(xiàn)下拉菜單的子菜單隱藏、顯示、通過鼠標(biāo)移入、移出事件觸發(fā)子菜單的顯示與隱藏。<!DOCTYPE html> <html lang="en">
通過ul進(jìn)行靜態(tài)頁(yè)面的導(dǎo)航菜單及子菜單的布局，利用jQuery的hide() mouseenter mouseover mouseleave find() slideDown slideUp等方法實(shí)現(xiàn)下拉菜單的子菜單隱藏、顯示、通過鼠標(biāo)移入、移出事件觸發(fā)子菜單的顯示與隱藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級(jí)子菜單作業(yè)</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
border-right: 1px solid rgb(180, 168, 168);
cursor: pointer;
}
.sub2 li {
width: 100px;
}
a {
color: #fff;
text-decoration: none;
}
.c {
margin: 0 auto;
}
.menu {
height: 40px;
background: rgb(197, 102, 102);
color: #444;
}
.menu .cent {
width: 960px;
height: 40px;
}
.subpannel {
position: relative;
background: pink;
height: 120px;
}
.subpannel li {
border: none;
}
.subpannel li:hover {
background: #ccc;
}
.sub3 {
position: relative;
top: -40px;
left: 100px;
height: 125px;
}
.sub3 li {
width: 100px;
background: indianred;
}
.sub3 li:hover {
color: #fff;
background: rgb(43, 25, 25);
}
</style>
</head>
<body>
<div class="menu">
<div class="c cent">
<!-- 一級(jí)菜單 -->
<ul class="sub">
<li><a href="">網(wǎng)站首頁(yè)</a></li>
<li><a href="">企業(yè)榮譽(yù)</a></li>
<li><a href="">公司概況</a></li>
<li><a href="">公司文化</a></li>
<li><a href="">產(chǎn)品展示</a>
<!-- 二級(jí)菜單 -->
<ul class='subpannel'>
<li>民用裝備</li>
<li class='sub2'>軍用設(shè)備
<!-- 三級(jí)菜單 -->
<ul class='sub3'>
<li>軍用電臺(tái)</li>
<li>坦克</li>
<li>火箭車</li>
</ul>
</li>
<li>企業(yè)裝備</li>
</ul>
</li>
<li> <a href="">在線論壇</a></li>
<li><a href="">意見反饋</a></li>
<li><a href="">聯(lián)系方式</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function () {
//設(shè)置所有子菜單隱藏
$('.subpannel').hide();
$('.sub3').hide();
// 通過Mousemove /mouseover/mouseenter 觸發(fā)鼠標(biāo)移入事件
$('.sub>li').mousemove(function () {
// 利用find()找到子菜單元素通過slideDown()顯示子菜單
$(this).find('.subpannel').slideDown(500);
})
// 通過Mouseleave /mouseout 觸發(fā)鼠標(biāo)移出事件
$('.sub>li').mouseleave(function () {
// 利用find()找到子菜單元素通過slideUp()隱藏子菜單
$(this).find('.subpannel').slideUp(500);
})
$('.subpannel>li').mouseover(function () {
$(this).find('.sub3').slideDown(500);
})
$('.subpannel>li').mouseleave(function () {
$(this).find('.sub3').slideUp(500);
})
})
</script>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-02-12 12:40:35
老師總結(jié)：多級(jí)菜單,應(yīng)用很廣的, 不僅可以用到頂部主導(dǎo)航, 側(cè)邊導(dǎo)航也很常用, 例如一些商城左側(cè)的商品列表