jQuery弹性滑动导航菜单

By柏小白

jQuery弹性滑动导航菜单

最近看到很多鼠标滑过的效果,今天来整理下

<div id="nav">
	<div class="nav-menu">
		<a class="current" href="#">首页</a>
		<a href="#">Menu YI</a>
		<a href="#">Menu ER</a>
		<a href="#">Menu SAN</a>
		<a href="#">Menu SI</a>
		<a href="#">Menu WU</a>
	</div>
	<div class="nav-current"></div>
</div>

#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:#FF5E52;}

jQuery(document).ready(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弹性滑动导航菜单






About the author

柏小白 administrator