如何创建导航栏滚动/滑动水平宽度cordova？

Question

我需要创建一个＆＃34;类别列表＆＃34;与cordova应用程序的倍数项目。 逻辑说＆＃34;简单，创建一个HTML列表＆＃34;，但我的列表不能正常工作，因为有时它会让它变得疯狂＆＃34;。

这是我想要的（滑动导航栏）：

这就是问题（当我触发＆＃34;滑动＆＃34;，有时此移动所有页面）：

这是de CSS：

.menu-category{position:relative;width:100%;display:block;overflow:hidden;}
.menu-category  ul{margin:0;padding:0;list-style:none;}
.menu-category  ul li {margin:0;padding:0;list-style:none;float:left;}
.menu-category  ul li a {margin:0;padding:17px 15px;display:block;background-color:#FFFFFF;}

这是HTML：

<div class="menu-category">
    <ul>
        <li><a href="">Green</a></li>
        <li><a href="">Pink</a></li>
        <li><a href="">Blue</a></li>
        <li><a href="">Red</a></li>
        <li><a href="">Black</a></li>
        <li><a href="">Gray</a></li>
        <li><a href="">Yellow</a></li>
    </ul>
</div>

jQuery（我不会使用更多，但我认为可能需要更多代码）：

/**
This code is to recalculate the "css width" for <UL> element, and make it easy to use(enable horizontal scrolling)
*/
(function(){
    var nav = $('.menu-category').children('ul');
    var navWidth = 0;
    nav.find('li').each(function(){
        navWidth+=$(this).outerWidth(true);
    });
    nav.css('width', navWidth);
})(jQuery);

而且，我使用了crossova和crosswalk，以及Bootstrap + jQuery + jQuery mobile

Answer 1

.menu-category{
  position:relative;
  width:100vw;
  display:block;
}
.menu-category  ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.menu-category  ul li {
  margin:0;
  padding:0;
  list-style:none;
}
.menu-category  ul li a {
  margin:0;
  padding:17px 15px;
  display:block;
  background-color:#FFFFFF;
}

http://codepen.io/anon/pen/dGdbyO