摘要：<!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;} /*内外边距清零*/
.nav_top{
width:1200px; /*最底层导航栏CSS样式*/
height: 50px;
background:blue;
border-radius: 10px;
box-shadow: 0px 6px 30px #ccc inset;
margin:0px auto;
position: relative;
}
li{ /*清除所有li的圆点*/
list-style:none;
}
.nav_1>li{
float: left; /*设置第一级li的样式*/
height: 45px;
width:150px;
line-height: 50px;
text-align: center;
font-size: 18px;
color: ghostwhite;
}
.nav_2 li{
width: 150px; /*设置第二级往后所有li的样式*/
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>四级导航下拉导航</title>
</head>
<body>
<script>
$(function(){ //就绪函数简写
$('#foot').hide() //隐藏跟随下划线
$('.nav_1>li').mousemove(function(){ //第一级li移上触发事件
$('#foot').show(function(){ //显示跟随导航条
$('.nav_1>li').hover( //点击第一级li触发切换
function(){ //第一事件函数
//parseInt取整数，attr('name')获得当前元素的name属性值 所以每个li增加了name值从0开始递增
$x=parseInt($(this).attr('name'))*150 //赋值给变量x
//stop()先停止（不然每次从0位置开始移动，设置后就可以从当前位置右移）
$('#foot').stop().animate({left:$x+'px'},300) //获得当前跟随下划线，自定义动画变量数值+PX
},
function(){ //第二事件触发函数
$('#foot').stop().animate({left:'hide'},200) //移出时 自定义动画右移隐藏
}
)
})
})
})
$(document).ready(function(){
('.nav').css({'width':'100%','height':'50px','background':'rgb(209, 219, 223)',}) //导航背景色
//隐藏二级 三级 四级
$('.nav_2,.nav_3,.nav_4').hide()
//点击1级显示2级
$('.nav_b').mousemove(function(){
$(this).find('.nav_2').show()
})
//鼠标移开不显示2级
$('.nav_b').mouseleave(function(){
$(this).find('.nav_2').hide()
})
//点击2级显示3级
$('.nav_c').mousemove(function(){
$(this).find('.nav_3').show()
})
//鼠标移开不显示3级
$('.nav_c').mouseleave(function(){
$(this).find('.nav_3').hide()
})
//点击3显示4级
$('.nav_d').mousemove(function(){
$(this).find('.nav_4').show()
})
//鼠标移开不显示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">美容护肤
<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">日用洗护</li>
<li name="4">超值特价</li>
<li name="5">海外精品</li>
</ul>
</div>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-02-14 17:26:37
老师总结：这类特效, 大多是通过一些事件方法来实现, 在方法中可以对页面元素进行,进行一些动态的设置,达到动画的效果
