jQuery菜单滑动

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

分类：导航菜单 > 滑动导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

导航菜单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()
})