javascript - 响应式导航菜单，元素 "tuck under"彼此

Question

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

我需要在页面变窄时缩小此菜单，而不是破坏导航菜单，我希望将不适合的元素放在“更多...”下拉选项卡下方。这有意义吗？这是图形表示...

所以上面的图片应该是 1024 宽度的样子，下面是 768 宽度的。

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

任何提示将不胜感激，只是目前不确定从哪里开始。

谢谢

Answer 1

实现这个很简单，如果菜单可以是静态的并且在调整窗口大小时不必调整；在这种情况下，@skip405 的示例是一个非常好的解决方案 (+1)。

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

我会按如下方式解决问题:

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

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

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