jQuery弹性滑动导航菜单-jQuery效果

例子截图：

HTML代码如下：

 	

 		首页
 		关于Camnpr
 		案例展示
 		联系方式

 	
 

CSS代码如下：

body{ font-size:100%; font-family:"Microsoft YaHei","Arial"; background:#fff;}
#nav{ position:relative; width:573px; _width:576px; margin:100px auto 0 auto; border-bottom:2px #ddd solid;}
#nav .nav-menu{ height:50px;}
#nav .nav-menu a{ display:block; float:left; height:50px; padding:0 40px; line-height:50px; color:#666; font-size:16px; text-decoration:none;}
#nav .nav-current{ position:absolute; bottom:-2px; height:2px; overflow:hidden; background:#80b600;}

JS代码如下：

请先引用jQuery，例如：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 具体可以查看：如何调用谷歌Jquery

$(function(){
(function(){
var $navcur = $(".nav-current");
var $nav = $("#nav");
var current = ".current";
var itemW = $nav.find(current).innerWidth();	//默认当前位置宽度
var defLeftW = $nav.find(current).position().left;	//默认当前位置Left值

//添加默认下划线
$navcur.css({width:itemW,left:defLeftW});

//hover事件
$nav.find("a").hover(function(){
	var index = $(this).index();	//获取滑过元素索引值
	var leftW = $(this).position().left;	//获取滑过元素Left值
	var currentW = $nav.find("a").eq(index).innerWidth();	//获取滑过元素Width值
	$navcur.stop().animate({
		left: leftW,
		width: currentW
	},300);

	},function(){
	$navcur.stop().animate({
		left: defLeftW,
		width: itemW
	},300)
})
})();

});