jQuery底部跟随水平导航菜单
分类：实例代码
更多导航菜单效果可以查阅特效版块导航菜单分类。
下面分享一个使用jQuery实现的底部具有跟随效果的导航菜单。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
/*设置默认div的宽度为100%,高度自动,并且可以追加类名添加背景颜色或图片, 最后清除浮动*/
.container {
width: 100%;
height: auto;
}
.container:after {
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
/*设置居中效果,并且赋予最小宽度,解决:拉伸浏览器时,挤压元素*/
.wrapper {
margin: 0 auto;
width: 90%;
min-width: 1240px;
height: auto;
position: relative;
}
nav {
width: 600px;
margin: 0 auto;
}
.nav-list {
width: 100%;
list-style-type: none;
}
.nav-list li {
display: inline-block;
margin: 5px;
width: 90px;
float: left;
}
.nav-list li a {
display: block;
text-align: center;
font-size: 16px;
color: #0DAF90;
}
.slidenav {
margin-top: 10px;
width: 100%;
height: 3px;
float: left;
box-sizing: border-box;
box-shadow: 0 1px 10px #ccc;
}
.slide-span {
border-bottom: 3px solid #0daf90;
box-shadow: 2px 2px 10px #0DAF90;
float: left;
width: 100px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
var slideli = $(".nav-current").index() * 100;
$(".slide-span").css({
"margin-left": slideli
}, 500);
$("nav ul li a").hover(function() {
var slidelistart = $(this).parents().index();
var slideli = ($(this).parents().index()) * 100;
$(".slide-span").stop().animate({
"margin-left": slideli
}, 500);
}, function() {
var slideli = $(".nav-current").index() * 100;
$(".slide-span").stop().animate({
"margin-left": slideli
}, 500);
})
})
</script>
</head>
<body>
<div class="container">
<div class="wrapper">
<nav>
<ul class="nav-list" id="nav-list">
<li class="nav-current">
<a href="#"><span class="nav-span"></span></a>
</li>
<li>
<a href="#"><span class="nav-span">前端教程网一</span></a>
</li>
<li>
<a href="#"><span class="nav-span">前端教程网二</span></a>
</li>
<li>
<a href="#"><span class="nav-span">前端教程网三</span></a>
</li>
<li>
<a href="#"><span class="nav-span">前端教程网四</span></a>
</li>
<li>
<a href="#"><span class="nav-span">前端教程网五</span></a>
</li>
</ul>
<div class="slidenav"><span class="slide-span"></span></div>
</nav>
</div>
</div>
</body>
</html>
jQuery底部跟随水平导航菜单，这样的场景在实际项目中还是用的比较多的，关于jQuery底部跟随水平导航菜单就介绍到这了。
jQuery底部跟随水平导航菜单属于前端实例代码，有关更多实例代码大家可以查看。