响应式导航菜单,项目"tuck under"彼此

Question

我希望有人能够用我希望实现的目标指出正确的方向.我正在建立一个响应式网站,并在顶部有一个传统的导航菜单,里面有几个项目.

我需要这个菜单在页面变窄时收缩,而不是导航菜单中断,我希望不适合的项目在"更多..."下拉选项卡下面.这有意义吗？这是一个图形表示......

因此,顶部图像将是1024宽度的样子,下面是768宽度.

菜单中的内容是未知的,因此宽度会有所不同,所以我需要计算组合链接的宽度,然后将更多内容放在More ..下拉列表下面.

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

谢谢

Answer 1

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

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

我将解决问题如下:

1. 计算并添加开头所有链接的外部宽度.
2. 将所有可用链接附加到"更多"选项卡(克隆),以便可以动态显示/隐藏它们.这比创建新的(resp.销毁)DOM元素要快得多.
3. 将处理程序绑定到onresize事件.在处理程序中,获取当前菜单宽度并将其与链接的宽度进行比较.隐藏所有不适合菜单的链接,并在"更多"标签中显示其对应的链接.如果菜单足够宽,则显示链接的方式相反.

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

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

Answer 2

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

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