Question

我正在寻找一个反应灵敏的水平菜单，动态地折叠那些不适合＆＃34;更多＆＃34;菜单部分。非常像这个例子： http://www.jqueryscript.net/demo/Responsive-Horizontal-Nav-Menu-with-jQuery-CSS

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

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

Answer 1

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

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

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

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

你有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*/
}

您只需继续此过程，直到您的菜单完全按照您的意愿做出反应。

编辑：我制作了一个非常糟糕的小提琴，但它很实用，你可以将它用作源素材。有两个菜单，根据窗口的宽度，它会隐藏或显示项目。

Answer 2

尚未（即除非您使用固定的菜单项宽度）。

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