响应式导航菜单，项目“掖在一起”

Question

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

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

因此顶部图像可能是1024宽度的样子，下面是768宽度。

菜单中的内容未知，因此宽度会有所不同，所以我需要计算组合链接的宽度，然后将更多内容放在More ..下拉列表下。

任何提示都会非常感激，只是不知道从哪里开始。

由于

Answer 1

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

如果实现必须在窗口调整大小时动态调整菜单，那么它会变得棘手......当用户缩放浏览器窗口时，window.onresize事件经常被触发，所以一个简单的实现（例如@ skip405的在每个事件上执行的方法都会太慢/太贵。

我将解决问题如下：

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

以下是我的实施：http://jsfiddle.net/vNqTF/

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

Answer 2

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

另外请务必查看一篇很棒的文章，提供有关如何使用上述flexMenu插件组织此类灵活导航的分步说明：http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/

Answer 3

我认为我的变体可能是你的起点。我是jQuery的新手，我自己也在学习很多东西 - 所以任何人都可以随意纠正（并改进）我的方法或逻辑：）

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

要查看它的实际效果，您需要调整“结果”窗口的大小，以便连续存在3个或4个项目（而不是7个），然后再次按“运行”。将鼠标悬停在“更多”上以查看其余部分。

在这个小提琴中，我计算循环中列表项的宽度，并将其与整个菜单的宽度进行比较。当计算出的项目宽度高于菜单的宽度时 - 我们可以获得此时可见li的数量。

NB：此代码适用于document.ready，但尚无法调整窗口大小。所以当你调整窗口大小时按Run。