jQuery弹性滑动导航菜单
制作方法
引入文件
<script src="js/jquery.min.js"></script>
HTML
<div id="nav"> <div class="nav-menu"> <a href="#">首页</a> <a href="#">了解我们</a> <a href="#">产品展示</a> <a href="#">服务报价</a> <a href="#">最新消息</a> <a href="#">联系方式</a> </div> <div class="nav-current"></div> </div>
CSS
#nav {
position: relative;
margin: 100px auto 0 auto;
width: 832px;
border-bottom: 2px #ddd solid;
_width: 835px;
}
#nav .nav-menu {
height: 50px;
}
#nav .nav-menu a {
float: left;
display: block;
padding: 0 40px;
height: 50px;
color: #666;
text-decoration: none;
font-size: 16px;
line-height: 50px;
}
#nav .nav-current {
position: absolute;
bottom: -2px;
overflow: hidden;
height: 2px;
background: #80b600;
}
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.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);
});
})();
});
标签：jQuery
