jQuery弹性滑动导航菜单-CSDN博客

本文链接：https://blog.csdn.net/big1989wmf/article/details/84470010

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8" />

<title>实例：jQuery弹性滑动导航菜单</title>

<style type="text/css">

body{ font-size:100%; font-family:"Microsoft YaHei","Arial"; background:#fff;}

#nav{ position:relative; width:832px; _width:835px; 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;}

</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(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.width(itemW);


//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)

})

})();


});

</script>

</head>

<body>

<div id="nav">

 <div class="nav-menu">

 <a href="#" class="current">首页</a>

 <a href="#">了解我们</a>

 <a href="#">产品展示</a>

 <a href="#">服务报价</a>

 <a href="#">最新消息</a>

 <a href="#">联系方式</a>

 </div>

 <div class="nav-current"></div>

</div>

</body>

</html>