jQuery网站滑动导航菜单特效

效果展示：

下面是代码：

CSS：
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.menu {
  margin: auto;
  width: 400px;
  height: 40px;
  background: #60AC02;
  box-shadow: 0 0 2px;
}
.menu ul {
  width: 400px;
  height: 40px;
  background: #60AC02;
  position: relative;/* 必要 */
  margin: 0 auto;
}
.menu ul li {
  float: left;
}
.menu ul li a {
  display: block;
  padding: 0 10px;
  line-height: 40px;
  font-size: 14px;
  font-weight:bold;
  color: #fff;
}
.menu .block {
  width: 77px;
  height: 2px;
  background: #fff;
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 99;
}

JQuery:代码

<script type="text/javascript">
$(function() {
var _ke,
  _leftX,
  _newWidth,
  _speed = 200;
//添加节点
$('.menu ul').append('<div class="block"></div>');
var block = $('.block');
//默认第一个 (如果不想默认回到第一个就注释下面这行代码，修改一下.menu .block{ width：77px}的值)；
block.width($(".current").width()).css('left', $('.current a').position().left).data('rightLeft', block.position().left).data('rightWidth', block.width());
//获取偏移值，宽度 ->赋值给动画
$('.menu ul li').find('a').hover(function() {
_ke = $(this);
_leftX = _ke.position().left;
_newWidth = _ke.parent().width();
//动画
block.stop().animate({
left: _leftX,
width: _newWidth
},_speed);
}, function() {
block.stop().animate({
left: block.data('rightLeft'),
width: block.data('rightWidth')
},_speed)
})
})
</script>

HTML代码：

<div class="menu">
<ul>
<li class="current"><a href="http://www.blogxuan.com/">玄玄博客</a></li>
<li><a href="http://www.blogxuan.com/">PHP</a></li>
<li><a href="http://www.blogxuan.com/">JS/HTML</a></li>
<li><a href="http://www.blogxuan.com/">新闻资讯</a></li>
<li><a href="http://www.blogxuan.com/">网站案例</a></li>
</ul>
</div>

比上一篇文章发布的效果更加灵活了点！

玄玄博客 ：http://www.blogxuan.com/