无jQuery响应的水平菜单

Question

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

因为我要在静态生成的离线页面中使用它，所以我不想在代码中使用整个jQuery实现，而是寻找一个更简单的解决方案，这样做也是一样的，但是只有少量的JS，或者没有JS，但是使用的是纯CSS。

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

Answer 1

答案更新，在底部添加小提琴！

使用纯CSS是非常可能的，问题是它是否会很漂亮。由于CSS无法知道何时中断div (它只是这样做)，所以您必须手动将这些断点放入其中。由于您正在讨论的是脱机页面，手动跟踪可能没有问题。

您可能熟悉CSS中的@media规则。您也可能已经习惯于将其中的2或3个放在您的页面中，以获取一些不同的分辨率，并根据这些决议显示您的网页。

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

您是否有6项，第6项跌至600 at，然后添加以下内容：

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

继续上面的示例:如果第五个菜点将在500 at处换到下一行，则添加另一个断点：

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

您只需继续此过程，直到菜单按您所希望的方式做出反应。

编辑:我已经做了一个相当难看的Fiddle，但它的功能，你可能可以使用它作为来源材料。有两个菜单，根据窗口的宽度，它隐藏或显示项目。

小提琴

Answer 2

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

在called 4中，您有一个名为地域的新东西，这里有一个来自拉兹万·卡里曼 这里的示例(您可以在铬金丝雀中查看这个示例)。但在那之前，我担心javascript是最好的解决方案。