一个jquery写的 导航条，横线跟随
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一个jquery写的 导航条，横线跟随</title>
<script src="http://cdn.bootcss.com/jquery/1.8.2/jquery.js"></script>
<script>
$(function() {
/* ------------- mainNavA ------------- */
$('.mainNavA').each(function() {
var $box = $(this);
var $li = $box.find('li');
$hover_line = $('<div class="hover_line"></div>').appendTo($box);
$li.on('mouseenter',function() {
$(this).addClass('hover').siblings().removeClass('hover');
var w = $(this).outerWidth();
var left = $(this).position().left;
$hover_line.stop().animate( {
width:w,left:left
}
,200 );}).on('click',function() {
$(this).addClass('active').siblings().removeClass('active');
}
);
$box.mouseleave(function() {
var $nav_active = $box.find('li.active');
if($nav_active.length) {
$nav_active.addClass('hover').siblings().removeClass('hover');
var w = $nav_active.outerWidth();
var left = $nav_active.position().left;
$hover_line.stop().animate( {
width:w,left:left
}
,200 );}console.log('mouseleave');}).mouseleave();});
/* ------------- mainNavA end ------------- */})
</script>
<style>
a {
text-decoration:none;
}
ul,li {
margin:0px;
padding:0px;
list-style:none;
}
/*--------------------- .mainNavA --------------------------------*/
.mainNavA {
position:relative;
padding:0px 20px;
height:70px;
line-height:70px;
border-bottom:1px solid #e1e4e8;
background:#ffffff;
}
.mainNavA li {
float:left;
padding:0px 10px;
font-size:14px;
color:#444444;
margin-right:20px;
}
.mainNavA a {
color:#444444;
}
.mainNavA .hover a,.mainNavA a:hover {
color:#309ff4;
text-shadow:1px 1px 1px #acd9fb;
text-decoration:none;
}
.mainNavA .active.hover a {
font-weight:bold;
}
.mainNavA .hover_line {
height:2px;
overflow:hidden;
background:#309ff4;
position:absolute;
bottom:-1px;
}
/*--------------------- .mainNavA end --------------------------------*/
</style>
</head>
<body>
<!--html-->
<div class="mainNavA">
<ul>
<li><a href="#">栏目</a></li>
<li><a href="#">栏目标</a></li>
<li><a href="#">栏目标题</a></li>
<li class="active"><a href="#">栏目标题栏</a></li>
<li><a href="#">栏目标题栏目标题栏目标题</a></li>
</ul>
<!--<div class="hover_line">jquery 会帮我生存的</div>-->
</div>
<!--\html-->
</body>
</html>