当菜单项超出菜单宽度时，将菜单项移动到下拉菜单中[*为了响应]

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