abstrak：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jQuery/jquery-3.3.1.min.js"></scr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/jQuery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/csss/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
*{margin: 0; padding: 0;} /*內(nèi)外邊距清零*/
.nav_top{
width:1200px; /*最底層導(dǎo)航欄CSS樣式*/
height: 50px;
background:blue;
border-radius: 10px;
box-shadow: 0px 6px 30px #ccc inset;
margin:0px auto;
position: relative;
}
li{ /*清除所有l(wèi)i的圓點(diǎn)*/
list-style:none;
}
.nav_1>li{
float: left; /*設(shè)置第一級li的樣式*/
height: 45px;
width:150px;
line-height: 50px;
text-align: center;
font-size: 18px;
color: ghostwhite;
}
.nav_2 li{
width: 150px; /*設(shè)置第二級往后所有l(wèi)i的樣式*/
height:50px;
background:lightpink;
color:black;
position: relative;
}
.nav_3,.nav_4{ /*第三、第四級絕對定位位置*/
position:absolute;left: 150px; top:0px;
}
#foot{ /*跟隨下劃線CSS樣式*/
width:150px;
height: 5px;
background:gold;
position: absolute; top:47px;
}
</style>
<title>四級導(dǎo)航下拉導(dǎo)航</title>
</head>
<body>
<script>
$(function(){ //就緒函數(shù)簡寫
$('#foot').hide() //隱藏跟隨下劃線
$('.nav_1>li').mousemove(function(){ //第一級li移上觸發(fā)事件
$('#foot').show(function(){ //顯示跟隨導(dǎo)航條
$('.nav_1>li').hover( //點(diǎn)擊第一級li觸發(fā)切換
function(){ //第一事件函數(shù)
//parseInt取整數(shù)，attr('name')獲得當(dāng)前元素的name屬性值 所以每個li增加了name值從0開始遞增
$x=parseInt($(this).attr('name'))*150 //賦值給變量x
//stop()先停止（不然每次從0位置開始移動，設(shè)置后就可以從當(dāng)前位置右移）
$('#foot').stop().animate({left:$x+'px'},300) //獲得當(dāng)前跟隨下劃線，自定義動畫變量數(shù)值+PX
},
function(){ //第二事件觸發(fā)函數(shù)
$('#foot').stop().animate({left:'hide'},200) //移出時 自定義動畫右移隱藏
}
)
})
})
})
$(document).ready(function(){
('.nav').css({'width':'100%','height':'50px','background':'rgb(209, 219, 223)',}) //導(dǎo)航背景色
//隱藏二級 三級 四級
$('.nav_2,.nav_3,.nav_4').hide()
//點(diǎn)擊1級顯示2級
$('.nav_b').mousemove(function(){
$(this).find('.nav_2').show()
})
//鼠標(biāo)移開不顯示2級
$('.nav_b').mouseleave(function(){
$(this).find('.nav_2').hide()
})
//點(diǎn)擊2級顯示3級
$('.nav_c').mousemove(function(){
$(this).find('.nav_3').show()
})
//鼠標(biāo)移開不顯示3級
$('.nav_c').mouseleave(function(){
$(this).find('.nav_3').hide()
})
//點(diǎn)擊3顯示4級
$('.nav_d').mousemove(function(){
$(this).find('.nav_4').show()
})
//鼠標(biāo)移開不顯示4級
$('.nav_d').mouseleave(function(){
$(this).find('.nav_4').hide()
})
})
</script>
<div class="nav">
<div class="nav_top">
<div id='foot'></div>
<ul class="nav_1">
<li class="nav_b"name="0">首頁 <i class="fa fa-caret-down"></i>
<ul class="nav_2">
<li class="nav_c">會員中心
<ul class="nav_3">
<li class="nav_d">我的推薦
<ul class="nav_4">
<li>一級會員</li>
<li>二級會員</li>
<li>三級會員</li>
</ul>
</li>
<li >我的收入</li>
<li>我的余額</li>
</ul>
</li>
<li>分銷中心</li>
<li>我的訂單</li>
</ul>
</li>
<li class="nav_b" name="1">美容護(hù)膚
<ul class="nav_2">
<li>面膜</li>
<li class="nav_c">精華液
<ul class="nav_3">
<li>牡丹精華</li>
<li class="nav_d">紅石榴
<ul class="nav_4">
<li>抗氧化</li>
<li>精華</li>
<li>原液</li>
</ul>
</li>
<li>玻尿酸</li>
</ul>
</li>
<li>面霜</li>
</ul>
</li>
<li name="2">彩妝香水</li>
<li name="3">日用洗護(hù)</li>
<li name="4">超值特價</li>
<li name="5">海外精品</li>
</ul>
</div>
</div>
</body>
</html>
Guru membetulkan：天蓬老師Masa pembetulan：2019-02-14 17:26:37
Rumusan guru：這類特效, 大多是通過一些事件方法來實(shí)現(xiàn), 在方法中可以對頁面元素進(jìn)行,進(jìn)行一些動態(tài)的設(shè)置,達(dá)到動畫的效果