我们之前在这里写了一些关于优先级+模式的内容。这里有一些现实世界的例子。 我最近需要使用它。我发现了 Gijs Rogé 的 priority-navigation。它非常好：没有依赖项，代码简洁，相当可配置和可设计。不过它不是特别小，而且有相当一部分定义了辅助函数。我当时在一个拥有所有这些东西的环境中，所以我想尝试一个版本。
技巧：测试元素是否换行
查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 通过换行/jQuery 实现优先级导航。
此版本依赖于 jQuery（用于 DOM 易用性）和 Lodash（用于去抖动）。这些远非微不足道，您可能不会仅仅为了导航而添加它们，但我的项目可以使用它们。
我也采用了与我在其他版本中看到的略有不同的方法。我没有测量可用宽度和每个菜单项的宽度以查看它们是否适合，而是让菜单项换行。当窗口大小调整时，我检查元素的位置，如果可以通过它们的位置判断它们是否已换行，则将其放入溢出中。因此，您实际上永远不会看到任何换行。（如果您的菜单项可以换行，您可能不需要优先级+。）
当然，还需要做一些工作。有了关于哪些项目应该在溢出中的信息，我需要将它们克隆到那里。并且准备好当窗口大小调整时重复执行所有操作，但不要太快（因此 去抖动）。
技巧：测量宽度
我更常见到的技巧是测量宽度并根据这些宽度做出选择。Johan van Tongeren 有一个这样的版本
查看 CodePen 上 Johan van Tongeren (@Dreamdealer) 的笔 响应式水平菜单。
代码非常简洁。测量可用空间和元素所需的面积。如果没有足够的空间，则将一个元素提取到溢出中并重试。这似乎有很多计算，特别是递归，而且没有去抖动，但它运行起来还不错。
Luke Jacksonn 以类似的方式编写了一个版本
查看 CodePen 上 lukejacksonn (@lukejacksonn) 的笔 贪婪导航。
技巧：提前选择溢出项
Michael Scharnagl 有一个演示，根本不需要 JavaScript。
它使用 :target 选择器 来隐藏/显示一组链接。他使用链接上的 alpha/beta/gamma 类结合媒体查询，在不同的屏幕宽度下显示更多/更少的链接。
重点
嗯。我想你可以随时获取别人的代码来完成某些事情。很多时候这是一个好主意。但有时自己深入研究并尝试自己编写并探索其他可能性也很有趣。我不确定我的版本是否更好（不是），但我了解了问题和不同的可能方法。
我喜欢你的方法，Chris。
我使用类似的技术实现了自动折叠菜单——减少计算/DOM 查询以获得更快的性能。
如果我们对性能吹毛求疵，我们可以始终测量包装元素到容器的高度——然后我们只查询单个元素。
在许多情况下，我认为优先级导航可能比传统的可折叠导航效果更好，因为它在各种关于汉堡图标被忽略/误解的文章中都有记录。
最后一点——您可以进行 Lodash 的自定义构建以减小文件大小 https://lodash.node.org.cn/custom-builds
这种类型的导航自然而然地出现在我的一个客户那里（或者他们在另一个网站上观察到它），但不是以自动化方式。他只是让最后一个导航链接成为一个菜单项，上面写着“更多”。（使用 CMS 中当前可用的工具）
问题是我发现导航的最佳样式结构是 flexbox，它在许多屏幕上都能完美缩放和调整大小。
但自动化似乎需要固定宽度导航，我不想为此放弃 flexbox。
但也许可以借鉴的一个巧妙想法是在“更多”菜单中添加计数，即使它是静态创建的。
最后，当任何导航切换到移动设备时，使用自动化系统最多只能容纳一两个链接，其余链接都位于“更多”链接下，我认为这永远不会是理想的选择。因此，这仅适用于小窗口的电脑屏幕，或者可能是平板电脑？
许多这些巧妙的方案可能对应用程序来说还可以，但对网站来说不行？但话又说回来，总有特殊情况……
我还有另一种方法，它将优先级放在优先级+中。提供更多控制，而无需手动定义断点来实现。考虑到 CMS 集成而构建。
https://matthornsby.github.io/priority-navigation/