鼠标悬浮导航菜单底部出现动画横线
分类：实例代码
鼠标悬浮导航菜单底部出现动画横线属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它实现了鼠标悬浮，导航菜单底部出现动画横条的效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: 0;
}
.header {
width: 100%;
background: #F5F5F5;
}
.nav {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.nav ul li {
height: 40px;
line-height: 40px;
float: left;
padding: 10px 5px;
margin: 0px 5px;
position: relative;
}
.nav ul li a {
color: #666;
font-family: 'Microsoft Yahei';
font-size: 14px;
text-decoration: none;
}
.nav ul li a:hover {
color: #000;
text-decoration: none;
}
.nav ul li span {
display: block;
position: absolute;
width: 0px;
height: 0px;
background: #1FAEFF;
top: 58px;
left: 50%;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
$('.nav li').hover(function () {
$('span', this).stop().css('height', '2px');
$('span', this).animate({
left: '0',
width: '100%',
right: '0'
}, 200);
}, function () {
$('span', this).stop().animate({
left: '50%',
width: '0'
}, 200);
});
});
</script>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li><a>首页</a><span></span></li>
<li><a>菜单导航</a><span></span></li>
<li><a>时间日期</a><span></span></li>
<li><a>焦点图</a><span></span></li>
<li><a>tab标签</a><span></span></li>
<li><a>jquery特效</a><span></span></li>
<li><a>相册代码</a><span></span></li>
<li><a>图片特效</a><span></span></li>
<li><a>pipipi.net</a><span></span></li>
</ul>
</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$('.nav li').hover(function () {}，function(){}）,规定鼠标悬浮和离开执行的函数。
（3）.$('span', this).stop().css('height', '2px')，底部线条其实就是span元素，设置线条的高度为2px，后面添加stop()方法是为了防止动画多次重复执行的现象，大家可以把stop方法去掉连续多次移入移出查看效果。
（4）.$('span', this).animate({ left: '0',
width: '100%',
right: '0'
}, 200)，以动画方式设置底部线条的尺寸和位置。
二.相关阅读:
（1）.hover()可以参阅jQuery hover事件一章节。
（2）.stop()可以参阅jQuery stop()方法一章节。
（3）.css()可以参阅jQuery css()方法一章节。
（4）.animate()可以参阅jQuery animate()方法一章节。
鼠标悬浮导航菜单底部出现动画横线，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮导航菜单底部出现动画横线就介绍到这了。