jQuery菜单滑动

收藏

jQuery底部可滑动的导航菜单代码，鼠标经过导航时底部横线会自动滑动

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

导航菜单html代码和滑动底线.tips

<div class="navs_area"> 
    <div class="tips"></div> 
    <ul class="mainLeftNav"> 
        <li class="">网站模版</li> 
        <li class="cur">网站源码</li> 
        <li class="">网页特效</li> 
    </ul> 
</div>

animate 动画

function mainleftnav() { 
    var left = 0, width = 0, obj = $(".tips"); 
    $(".navs_area").find("li").each(function() { 
        if ($(this).hasClass("cur")) { 
            left = $(this).position().left; 
            width = $(this).outerWidth(); 
            setTimeout(function() { 
                obj.stop(true, false).animate({left: left, width: width}); 
            }, 500); 
 
        } 
        $(this).hover(function() { 
            var l = $(this).position().left, w = $(this).outerWidth(); 
            obj.stop(true, false).animate({left: l, width: w}); 
        }, function() { 
            obj.stop(true, false).animate({left: left, width: width}); 
        }); 
    }); 
} 
$(function() { 
    mainleftnav() 
})