jquery - 无需 jQuery 的响应式水平菜单

Question

我正在寻找一个响应式水平菜单，它可以动态折叠不适合菜单“更多”部分的元素。 非常像这个例子: http://www.jqueryscript.net/demo/Responsive-Horizontal-Nav-Menu-with-jQuery-CSS

因为我要在静态生成的离线页面中使用它，所以我不想在代码中使用整个 jQuery 实现，并寻找一个更简单的解决方案，做同样的事情，但只使用一点或不使用 JS，但使用纯CSS。

这可能吗？或者我必须使用 jQuery 来实现它吗？

Answer 1

[答案已更新，底部添加了 fiddle !]

使用纯 CSS 是很有可能的，问题只是它是否漂亮。由于 CSS 无法知道它何时中断 div(它只是这样做)，因此您必须手动放置这些断点。由于您正在谈论离线页面，因此手动跟踪它可能没有问题。

您可能熟悉 CSS 中的 @media 规则。您可能还习惯在页面中放置 2 或 3 个它们来捕获一些不同的分辨率并根据这些分辨率显示您的网页。

解决上述问题的方法是为每个菜单点添加一个 @media 断点。

您有 6 个元素，第 6 个在 600 像素处下降，然后添加以下内容:

@media screen and (max-width: 600px) {
    /*your CSS here to hide menu point 6 in the dropdown*/
}

继续上面的示例:如果第 5 个菜单点在 500 像素处换行到下一行，则添加另一个断点:

@media screen and (max-width: 500px) {
    /*your CSS here to hide menu point 6 AND 5 in the dropdown*/
}

您只需继续此过程，直到菜单完全按照您想要的方式使用react。

编辑:我做了一个看起来很糟糕的 fiddle ，但它很实用，你可以将它用作源 Material 。有两个菜单，根据窗口的宽度，它隐藏或显示元素。

Fiddle