没有 jQuery 的响应式水平菜单答案

【问题标题】：Responsive Horizontal Menu without jQuery没有 jQuery 的响应式水平菜单
【发布时间】：2015-10-23 04:09:03
【问题描述】：

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

由于我将在静态生成的离线页面中使用它，我不希望代码中的整个 jQuery 实现并寻找更简单的解决方案，这样做但只有一点或没有 JS，但有纯 CSS。

这可能吗？还是我必须使用 jQuery 来实现它？

【问题讨论】：

【解决方案1】：

[答案已更新，底部添加小提琴！]

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

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

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

你有 6 个项目并且第 6 个在 600px 处脱落，那么你添加以下内容：

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

继续上面的例子：如果第 5 个菜单点会在 500px 处换行到下一行，则添加另一个断点：

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

您只需继续此过程，直到您的菜单完全按照您想要的方式做出反应。

编辑：我制作了一个看起来很糟糕的 Fiddle，但它很实用，您可能可以将它用作源材料。有两个菜单，根据窗口的宽度，它隐藏或显示项目。

【讨论】：

感谢您的支持 - 我用基本的 CSS 实现了它：codepen.io/konradmd/pen/zGyLaX
它对移动设备完全响应，并包括宽度为 330 像素和 768 像素的媒体查询。CodePen 版本是纯 CSS 中的完全响应式水平菜单。我认为OP可能会发现它有帮助。周围似乎没有很多。

【解决方案2】：

这是不可能的还（也就是说，除非您使用固定的菜单项宽度）。

在 CSS Level 4 中，您有一个名为 regions 的新事物，有一个来自 Razvan Caliman here 的示例（您可以在 Chrome Canary 中查看此内容）。但在那之前，我担心 javascript 是最好的解决方案。

【讨论】：