<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>魅族导航--鼠标经过列表依次显示效果</title>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
.clearfix{
zoom:1;
}
.clearfix:after{
content:".";
display:block;
width:0;
height:0;
visibility:hidden;
clear:both;
}
.header{
width:600px;
height:300px;
margin:0 auto;
position:relative;
}
.header li{
float:left;
text-align:center;
}
.header-ul1{
background:#ccc;
}
.header-ul1>li{
width:100px;
text-align:center;
background:#ccc;
height:50px;
line-height:50px;
z-index:99999
}
.header-ul1>li.active{
background:darkgoldenrod;
}
.header-ul2 i{
display:block;
width:100px;
height:100px;
background:url("mobile.png") no-repeat center;
background-size:contain;
}
.header-wrapper{
width:100%;
height:0;
animation:all 1s;
overflow:hidden;
position:absolute;
top:50px;
z-index:99;
left:0;
}
.header-wrapper li{
opacity:0;
}
.header-wrapper.header-show{
background:#00b2de;
animation:wrapper-show .8s forwards;
}
@-webkit-keyframes wrapper-show {
from {
height: 0
}
to {
height: 142px
}
}
.header-wrapper.header-show li{
opacity: 1 \9 \0;
filter: alpha(opacity=100);
-webkit-animation: sub-enter .8s forwards;
animation:sub-enter 1s forwards
}
.header-wrapper.header-show li:nth-child(1){
-webkit-animation-delay: 0s;
animation-delay: 0s
}
.header-wrapper.header-show li:nth-child(2){
-webkit-animation-delay: .4s;
animation-delay: .4s
}
.header-wrapper.header-show li:nth-child(3){
-webkit-animation-delay: .8s;
animation-delay: .8s
}
@-webkit-keyframes sub-enter{
from {
-webkit-transform: translate(70px);
transform: translate(70px);
opacity: 0;
filter: alpha(opacity=0)
}
to {
-webkit-transform: translate(0);
transform: translate(0);
opacity: 1;
filter: alpha(opacity=100)
}
}
</style>
</head>
<body>
<div class="header">
<ul class="header-ul1 clearfix">
<li>官网</li>
<li data-index="1">
手机
<div class="header-wrapper" data-index="1">
<ul class="header-ul2 clearfix">
<li>
<i></i>
<span>手机</span>
</li>
<li>
<i></i>
<span>OPPO R9</span>
</li>
<li>
<i></i>
<span>OPPO R9</span>
</li>
</ul>
</div>
</li>
<li>耳机</li>
<li data-index="2">充电器
<div class="header-wrapper" data-index="2">
<ul class="header-ul2 clearfix">
<li>
<i></i>
<span>充电器</span>
</li>
<li>
<i></i>
<span>OPPO R9</span>
</li>
<li>
<i></i>
<span>OPPO R9</span>
</li>
</ul>
</div>
</li>
<li>配件</li>
<li data-index="3">
智能
<div class="header-wrapper" data-index="3">
<ul class="header-ul2 clearfix">
<li>
<i></i>
<span>智能</span>
</li>
<li>
<i></i>
<span>OPPO R9</span>
</li>
<li>
<i></i>
<span>OPPO R9</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(".header-ul1 li").each(function(){
var $index=$(this).attr("data-index"),$this=$(this);
$this.hover(
function(){
$this.addClass("active");
if($this.attr("data-index")){
$(".header-wrapper[data-index="+$index+"]").addClass("header-show")
}
},function(){
$this.removeClass("active");
if($this.attr("data-index")){
$(".header-wrapper[data-index="+$index+"]").removeClass("header-show")
}
}
);
});
</script>
</html>
