如何創建導航欄滾動/滑動水平寬度科爾多瓦？

嗯，我需要創建一個「分類列表」與一個科爾多瓦應用程序的多個項目。該邏輯說「簡單，創建一個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」，謝謝！ –

如何創建導航欄滾動/滑動水平寬度科爾多瓦？

回答

相關問題