當菜單項超出菜單寬度時，將菜單項移動到下拉菜單中[*爲了響應]

Question

我有一個像下面這樣的菜單，並且在某些屏幕分辨率上，它超出了菜單的寬度，並且出現在兩行上。所以，我正在考慮將不適合的項目移動到將放置在同一菜單中的下拉菜單中。

<ul> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
</ul> 

是否有一個jQuery插件來幫助我做到這一點？

Answer 1

在CSS中使用Media Queries解決此問題。

例如：

@media all and (max-width: 640px) and (min-width: 240px) { 
    #fulllength_menu { 
    //Hide menu that's displayed for screens bigger than 640px 
    display:none; 
    } 
    #minimobile_menu{ 
    //Hide menu that's displayed for screens smaller than 640px but bigger than 240px 
    display:block; 
    } 
} 

Check our this tutorial for more details

OR

您可以通過特徵檢測通過一個名爲Modernizr的和加載自定義CSS文件，一個漂亮的腳本去當你的網站被觀看的一個移動設備。

Check it out here