6

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

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

1024宽度

在此处输入图像描述

所以顶部的图像可能是 1024 宽度的样子,下面是 768 的宽度。

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

任何提示将不胜感激,只是现在不知道从哪里开始。

谢谢

4

3 回答 3

6

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

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

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

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

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

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

于 2012-08-12T21:58:18.537 回答
4

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

还请务必查看一篇很棒的文章,其中提供了有关如何使用上述 flexMenu 插件组织这种灵活导航的分步说明:http ://webdesign.tutsplus.com/tutorials/site-elements/a-灵活的响应式导航方法/

于 2013-10-30T22:00:32.217 回答
2

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

我的出发点在这里:http: //jsfiddle.net/skip405/yN595/1/

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

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

注意:此代码适用于 document.ready 并且不适用于调整窗口大小。因此,当您现在调整窗口大小时,请按运行。

于 2012-08-12T21:39:02.647 回答