响应式导航菜单，项目“掖在”海誓山盟

Question

我希望有人能够指出我在正确的方向与我希望实现的目标。我正在建立一个响应式网站，并有一个跨越顶部的传统导航菜单，里面有几个项目。

当页面变窄时，我需要此菜单缩小，而不是导航菜单打破我想要的项目不适合放在“更多...”下拉选项卡下。这有意义吗？这里有一个图形表示...

那么最上面的图片是它可能是什么样子，1024宽度，而下方则是768的宽度。

菜单中的内容是不明所以的宽度会有所不同，所以我需要计算组合链接的宽度，然后什么比这更会得到把更多..下拉列表下方。

任何提示将不胜感激，只是不知道在哪里的那一刻开始。

谢谢

Answer 1

这里是一个可以解决问题的一个很好的jQuery插件：https://github.com/352Media/flexMenu

此外，一定要检查出一个伟大的文章提供有关如何使用上述flexMenu组织这种灵活的导航的一步一步的指示插件：http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/

Answer 2

我觉得我的变种可能是你的起点。我在jQuery的新手和我学习了很多自己 - 所以任何人，随时纠正（提高），我的方法或我的逻辑:)

我的出发点是在这里：http://jsfiddle.net/skip405/yN595/1/

要看到它在操作中，您需要调整结果窗口的大小，以便连续有3个或4个项目（不是7），然后再次按运行。将鼠标悬停在“更多”上可查看其余的人。

在这拨弄我的计算列表项的宽度在一个循环中，它与整个菜单的宽度进行比较。当物品的计算宽度变得高于菜单的宽度时 - 我们可以获得目前可见的li s的数量。

注意：此代码适用于document.ready，并且不适用于调整窗口大小。因此，现在调整窗口大小时请按运行。

Answer 3

实现这个很简单，如果菜单可以是静态的，没有进行调整时，在调整窗口大小;在这种情况下，@ skip405的例子是一个非常好的解决方案（+1）。

如果实现必须在窗口大小调整时动态调整菜单，但它会变得棘手......当用户缩放浏览器窗口时，会触发window.onresize事件，所以一个天真的实现（例如@skip405的方法在每个事件）会太慢/昂贵。

如下我想解决这个问题：

1. 计算并加上了开头的所有链接的外部宽度。
2. 将所有可用链接附加到“更多”选项卡（克隆），以便动态显示/隐藏它们。这比创建新的（对应的销毁）DOM元素的速度要快得多。
3. 将处理程序绑定到onresize事件。在处理程序中，获取当前菜单宽度并将其与链接的宽度进行比较。隐藏不适合菜单的所有链接，并在“更多”选项卡中显示其对应部分。如果菜单足够宽的话，显示链接也是一样。

这里是我的实现：http://jsfiddle.net/vNqTF/

只是调整窗口的大小，看看会发生什么。 ;）请注意，解决方案当然可以进行优化 - 这只是一个例子。