Javascript 响应式导航菜单，项目“；塞在“下面”；彼此

我希望有人能为我指明正确的方向，让我实现我的目标。我正在建立一个快速响应的网站，顶部有一个传统的导航菜单，里面有几个项目

当页面变窄时，我需要将此菜单缩小，但我希望不适合的项位于“更多…”下拉选项卡下方，而不是导航菜单断裂。这有意义吗？这是一个图形表示

因此，上面的图像可能是1024宽的图像，下面是768宽的图像

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

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

---

谢谢

我想我的变体可能是您的起点。我是jQuery的新手，我自己也学到了很多东西——所以任何人都可以随意纠正（并改进）我的方法或逻辑：）

我的出发点是：

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

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

li

s的数量

---

NB:此代码适用于document.ready，但不适用于调整窗口大小。因此，现在调整窗口大小时请按Run。

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

如果实现必须在调整窗口大小时动态调整菜单，那么它会变得很棘手。。。当用户缩放浏览器窗口时，

window.onresize

事件经常被触发，因此一个简单的实现（例如在每个事件上执行@skip405的方法）会太慢/太昂贵

我将按如下方式解决这个问题：

计算并在开始处将所有链接的外部宽度相加

将所有可用链接附加到“更多”选项卡（克隆），以便动态显示/隐藏它们。这比一直创建新（或销毁）DOM元素要快得多

将处理程序绑定到

onresize

事件。在处理程序中，获取当前菜单宽度，并将其与链接的宽度进行比较。隐藏菜单中不适合的所有链接，并在“更多”选项卡中显示对应的链接。如果菜单足够宽，显示链接的方式也一样

以下是我的实现：

---

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

这里有一个很好的jQuery插件，可以解决这个问题：

---

另外，请务必查看一篇很棒的文章，该文章提供了如何使用前面提到的flexMenu插件组织这种灵活导航的分步说明：

这似乎是正确的方法！非常感谢您的帮助谢谢您的变体，不完全是我要找的，但我已经给了您一票：-）@hcharge，是的，正如Aletheios所说，我的变体绝对是“幼稚的”。但是我学到了新的东西。谢谢：）