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()
})