一个jquery写的 导航条,横线跟随

一个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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注