jQuery滑动导航菜单

Html

Css

*{padding:0;margin:0;}
ul{list-style:none}
a{text-decoration:none}
.nav{width:100%;height:45px;
        background:#f9f9f9;position:fixed;top:0;z-index:99;
        border-bottom:1px solid #ddd;display:-moz-box;
        display:-webkit-box;display:box;
}
.nav_list{position:absolut;left:0;}
.nav_list ul{position:relative;white-space:nowrap;font-size:0;}
.nav_list ul li{display:inline-block;padding:0 13px;}
.nav_list ul li a{display:bloak;width:100%;line-height:46px;font-size:18px;text-align:center;color:#666;}
.nav_cur a{color:#48a5f4 !important;}
.sideline{display:block;position:absolute;border:0;height:2px; background:#48a5f4;left:0;top:43px;pointer-events:none;}

$(function(){
    $(".nav_list").css("left",sessionStorage.left+"px");
    $(".nav_list li").each(function(){
        if($(this).find("a").text()==sessionStorage.pagecount){
            $(".sideline").css({left:$(this).position().left});
            $(".sideline").css({width:$(this).outerWidth()});
            $(this).addClass("nav_cur").siblings().removeClass("nav_cur");
            navName(sessionStorage.pagecount);
            return false
        }
        else{
            $(".sideline").css({left:0});
            $(".nav_list li").eq(0).addClass("nav_cur").siblings().removeClass("nav_cur");
        }
    });
    var nav_w=$(".nav_list li").first().width();
    $(".sideline").width(nav_w);
    $(".nav_list li").on('click', function(){
        nav_w=$(this).width();
        $(".sideline").stop(true);
        $(".sideline").animate({left:$(this).position().left},300);
        $(".sideline").animate({width:nav_w});
        $(this).addClass("nav_cur").siblings().removeClass("nav_cur");
        var fn_w = ($(".nav").width() - nav_w) / 2;
        var fnl_l;
        var fnl_x = parseInt($(this).position().left);
        if (fnl_x <= fn_w) {
            fnl_l = 0;
        }else {
            fnl_l = fn_w - fnl_x;
        }
        $(".nav_list").animate({
            "left" : fnl_l
        }, 300);
        sessionStorage.left=fnl_l;
        var c_nav=$(this).find("a").text();
        navName(c_nav);
    });
    var fl_w=$(".nav_list").width();
    $(".nav_list").on('touchstart', function (e) {
        var touch1 = e.originalEvent.targetTouches[0];
        x1 = touch1.pageX;
        y1 = touch1.pageY;
        ty_left = parseInt($(this).css("left"));
    });
    $(".nav_list").on('touchmove', function (e) {
        var touch2 = e.originalEvent.targetTouches[0];
        var x2 = touch2.pageX;
        var y2 = touch2.pageY;
        if(ty_left + x2 - x1>=0){
            $(this).css("left", 0);
        }else{
            $(this).css("left", ty_left + x2 - x1);
        }
        if(Math.abs(y2-y1)>0){
            e.preventDefault();
        }
    });
});
function navName(c_nav) {
    switch (c_nav) {
        case "资讯":
            sessionStorage.pagecount = "资讯";
            break;
        case "分析":
            sessionStorage.pagecount = "分析";
            break;
        case "原创":
            sessionStorage.pagecount = "原创";
            break;
        case "技术":
            sessionStorage.pagecount = "技术";
            break;
        case "项目":
            sessionStorage.pagecount = "项目";
            break;
        case "评价":
            sessionStorage.pagecount = "评价";
            break;
        case "在线查询":
            sessionStorage.pagecount = "在线查询";
            break;
        case "新闻":
            sessionStorage.pagecount = "新闻";
            break;
        case "下载":
            sessionStorage.pagecount = "下载";
            break;
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery滑动导航菜单



代码描述：jQuery导航文字下划线效果

js导航文字下划线效果，下划线是根据文字的多少来呈现的

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

薄暮轻纱

相关代码

jQuery滑动导航菜单

最新