购物网站导航条案例
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
a {
color: #fff;
text-decoration: none;
}
ul {
list-style: none;
}
#nar-wrap {
height: 600px;
background-color: pink;
font-family: 'Microsoft YaHei';
}
#nav-div {
height: 30px;
height: 1000px;
background-color: #e60ceb;
margin: 0 auto;
position: relative;
}
#nav-div .nav {
list-style: none;
position: absolute;
}
.drop-down {
position: relative;
z-index: 999;
float: left;
margin-right: 30px;
line-height: 30px;
text-align: center;
min-width: 48px;
padding: 0 5px;
}
.drop-down a img {
padding-bottom: 5px;
padding-left: 5px;
}
.drop-down-content {
display: none;
background-color: #ff78f2;
}
.drop-down-content li {
border-top: 1px solid #fff;
font-size: 14px;
}
ul li a:hover {
background-color: purple;
}
</style>
</head>
<body>
<h1>购物网站导航条</h1>
<hr>
<div id="nar-wrap">
<div id="nav-div">
<ul class="nav">
<li class="drop-down">
<a href="#">首页</a>
</li>
<li class="drop-down">
<a href="#">幸福年货节</a>
</li>
<li class="drop-down">
<a href="#">新品直达站</a>
</li>
<li class="drop-down">
<a href="#">女装<img src="image/arrow.jpg"></a>
<ul class="drop-down-content" style="width:76px;">
<li><a href="#">韩流时尚</a></li>
<li><a href="#">日系森女</a></li>
<li><a href="#">英伦帅气</a></li>
<li><a href="#">欧美风尚</a></li>
</ul>
</li>
<li class="drop-down">
<a href="#">美妆</a><img src="image/arrow.jpg"></a>
<ul class="drop-down-content" style="width:68px;">
<li><a href="#">面膜</a></li>
<li><a href="#">护肤</a></li>
<li><a href="#">彩妆</a></li>
<li><a href="#">护肤套装</a></li>
</ul>
</li>
<li class="drop-down">
<a href="#">国际</a><img src="image/arrow.jpg"></a>
<ul class="drop-down-content" style="width:48px;">
<li><a href="#">韩国</a></li>
<li><a href="#">日本</a></li>
<li><a href="#">欧洲</a></li>
<li><a href="#">美洲</a></li>
</ul>
</li>
<li class="drop-down">
<a href="#"></a>
</li>
<li class="drop-down">
<a href="#"></a>
</li>
<li class="drop-down">
<a href="#">运动</a><img src="image/arrow.jpg"></a>
<ul class="drop-down-content" style="width:48px;">
<li><a href="#">足球</a></li>
<li><a href="#">篮球</a></li>
<li><a href="#">排球</a></li>
<li><a href="#">气球</a></li>
</ul>
</li>
<li class="drop-down">
<a href="#">母婴</a></a><img src="image/arrow.jpg"></a>
<ul class="drop-down-content" style="width:48px;">
<li><a href="#">奶嘴</a></li>
<li><a href="#">奶粉</a></li>
<li><a href="#">小车</a></li>
<li><a href="#">小房</a></li>
</ul>
</li>
<li class="drop-down">
<a href="#">鞋包</a><img src="image/arrow.jpg"></a>
<ul class="drop-down-content" style="width:48px;">
<li><a href="#">女鞋</a></li>
<li><a href="#">男鞋</a></li>
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(function() {
$('.nav>li').mouseover(function() {
$(this).children('ul').stop().slideDown(1000);
});
$('.nav>li').mouseout(function() {
$(this).children('ul').stop().slideUp(1000);
});
$('.nav li').hover(function() {
$(this).children('ul').stop().slideDown();
}, function() {
$(this).children('ul').stop().slideUp(1000);
});
$('.nav>li').hover(function() {
$(this).children('ul').stop().slideToggle(1000);
});
})
</script>
</body>
</html>
运行结果:
经过的时候导航条会拉下,离开的时候导航条会收起。
