响应式导航菜单，项目相互“隐藏”

Posted 2023-03-06

【中文标题】响应式导航菜单，项目相互“隐藏”

【英文标题】：Responsive navigation menu, items "tuck under" eachother

【发布时间】：2012-08-09 02:15:11

【问题描述】：

我希望有人能够以我希望实现的目标为我指明正确的方向。我正在构建一个响应式站点，顶部有一个传统的导航菜单，里面有几个项目。

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

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

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

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

谢谢

【参考方案1】：

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

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

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

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

注意：此代码适用于 document.ready，但不适用于调整窗口大小。所以当你现在调整窗口大小时按运行。

【讨论】：

感谢您的变体，不是我想要的，但我给了您一个支持:-)

@hcharge，是的，正如 Aletheios 所说，我的变体绝对是“幼稚的”。但我学到了新东西。谢谢:)

【参考方案2】：

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

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

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

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

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

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

【讨论】：

这似乎是要走的路！非常感谢您的帮助

【参考方案3】：

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

还请务必查看一篇精彩的文章，其中提供了有关如何使用上述 flexMenu 插件组织这种灵活导航的分步说明：http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/