模仿今日头条导航栏滑动显示更多

html：

<div class="subNav">
    <a href="javascript:void(0)" class="floatR subNav_choose"><span></span></a>
    <div class="subNav_menu">
        <ul>
            <li class="subNav_curr"><a href="#">热门</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">财经</a></li> 
            <li><a href="#">科技</a></li>
            <li><a href="#">时尚</a></li> 
            <li><a href="#">图片</a></li>
            <li><a href="#">汽车</a></li>
            <li><a href="#">科技1</a></li>
            <li><a href="#">时尚1</a></li> 
            <li><a href="#">图片1</a></li>
            <li><a href="#">汽车1</a></li>
       </ul>
    </div>
    </div>
    <div class="subNav_chooseCont">
    <div class="floatR subNav_choose chooseCont_close"><span></span></div>
    <div class="chooseCont_text">
  
        <ul class="chooseCont_list">
            <li><a href="#">热门</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">财经</a></li> 
            <li><a href="#">科技</a></li>
            <li><a href="#">时尚</a></li> 
            <li><a href="#">图片</a></li>
            <li><a href="#">汽车</a></li> 
            <li><a href="#">科技1</a></li>
            <li><a href="#">时尚1</a></li> 
            <li><a href="#">图片1</a></li>
            <li><a href="#">汽车1</a></li>
        </ul>
    </div>
</div>

js

$('.subNav_menu ul li').on("click",function(){
    $(this).addClass("subNav_curr").siblings().removeClass("subNav_curr");
})
var screenWidth = $(window).width();
var liWidth=80;
var numMin = parseInt ( screenWidth/liWidth/2 );
var menuWidth = $('.subNav_menu ul').outerWidth();
var liNum = $('.subNav_menu ul li').length ;
var allLi = 0;
for(var i = 0; i < liNum; i++){
  allLi += $('.subNav_menu ul li').eq(i).outerWidth();
}
for (var i = 0; i < numMin; i++) {
  $('.subNav_menu ul li').eq(i).click(function(){
    $('.subNav_menu').scrollLeft( 0 );
  });
}
for (var i = numMin; i < (liNum-numMin); i++) {
  $('.subNav_menu ul li').eq(i).click(function(){
      var index = $(this).index();
      var len=0;
      for (var i = numMin; i < index; i++) {
        var len1 =  $('.subNav_menu ul li').eq(i).outerWidth();
        len = len + len1;
      }
      $('.subNav_menu').scrollLeft( (liWidth+4)*(index-numMin)+len- liWidth*(index-numMin) );       
  });
}
for (var i = (liNum-numMin) ; i < liNum ; i++) {
  $('.subNav_menu ul li').eq(i).click(function(){
    $('.subNav_menu').scrollLeft( allLi - menuWidth + liWidth  );
  });        
}

$(".subNav_choose").on("click",function(){
    $(".subNav_chooseCont").css({"opacity":"1","visibility":"visible"});
})
$(".chooseCont_close").on("click",function(){
    $(".subNav_chooseCont").css({"opacity":"0","visibility":"hidden"});
})
$(".chooseCont_list li").on("click",function(){
    var currIndex=$(".chooseCont_list li").index(this);
    $(".subNav_chooseCont").css({"opacity":"0","visibility":"hidden"});
    $(".subNav_menu ul li").eq(currIndex).addClass("subNav_curr").siblings().removeClass("subNav_curr");
    $('.subNav_menu ul li').eq(currIndex).trigger("click");
})

样式我就不写出来了，实现的效果如下：