如何创建导航栏滚动/滑动水平宽度科尔多瓦？

嗯，我需要创建一个“分类列表”与一个科尔多瓦应用程序的多个项目。该逻辑说“简单，创建一个HTML列表”，但我的列表不工作正常，因为有时这使得它“疯狂”。如何创建导航栏滚动/滑动水平宽度科尔多瓦？

这是我想要的（刷卡导航栏）：

这是问题（当我触发 “刷卡”，有时这一举动所有页面）：

这是德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);

而且，我用人行横道上的科尔多瓦和Bootstrap + jQuer Y + jQuery的移动

来源

2016-01-22 Olaf Erlandsen

整个页面的滑动主要是与太宽并且使身体得到更大的宽度的元件的问题。最好是在浏览器中打开它，并检查代码 –

@FrankProvost，但我使用“溢出：隐藏”，以防止此问题... –

的确，你有但可能有一些其他样式从jquery移动或bootstrap覆盖您的代码。如果不检查或获取更多细节，很难找到答案。编辑：jQuery手机可以例如增加你的元素或默认的一些标题的宽度，迫使他们再次增加身体的长度 –

.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

来源

2016-01-22 07:43:43

这个工作正常！我将学习显示flex和“vw”，谢谢！ –

如何创建导航栏滚动/滑动水平宽度科尔多瓦？

回答

相关问题