当容器数量超过容器宽度时,修复动态响应式导航

时间:2013-05-08 12:56:59

标签: javascript jquery dynamic navigation

所以我目前正在使用一些动态导航。只是< ul>< li>的基本HTML标记了。组成。我的问题发生在用户向此导航中添加了太多项目且其容器内没有足够的空间时(想象一下这是一个简单的< div>)。

所以,我需要一个解决方案。我想知道是否有办法确定何时< ul>的宽度。如果大于或等于包含< div>的宽度,那么它将注入剩余的< li>将元素转换为新的< li>这基本上都是他们所有人的下拉。这会是可能的,如果是这样的话?

我知道jQuery的基础知识,但我担心我对此不太确定。哦,它需要响应性地工作,所以它也需要使用百分比。

如果这是可行的,或者如果您有更好的解决方法,请告诉我,谢谢。

1 个答案:

答案 0 :(得分:0)

更新: 我已根据我概述的计划更新了github repo。

-

我会使用jQuery。我的想法如下:

你会得到< div>的宽度,然后加上< li>的所有宽度,看看它们是否更大。 然后根据需要进行多次操作,以便< li>适合< div&gt ;.

然后将您带走的所有内容添加到新的< li>与另一个< ul>下拉列表。

我很乐意为此写点东西,但是直到我完成工作后才会这样做。

我的github上有一个响应式导航,它并不完全是你的后续,但这听起来像一个非常好的更新,所以一旦我写了一些东西,我会把它添加到我的github版本。 https://github.com/MartinBlackburn/responsive-nav