jquery - 当菜单项超过菜单宽度时，将它们移动到下拉菜单 [*for Responsiveness]

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 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;
  }
}

查看我们的本教程以获取更多详细信息

或者

您可以通过一个名为 Modernizr 的漂亮脚本进行功能检测，并在移动设备上查看您的网站时加载自定义 CSS 文件。

在这里查看