Html
    Css
    Js
*{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;}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery滑动导航菜单

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

0