0

所以我目前正在使用一些动态导航。只是 <ul><li> 组合的基本 HTML 标记。当用户在此导航中添加了太多项目并且其容器中没有足够的空间容纳它们时,就会出现我的问题(想象这是一个简单的 <div>)。

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

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

让我知道这是否可行,或者您是否有更好的解决方法,谢谢。

4

1 回答 1

0

更新:我已经用我概述的计划更新了 github 存储库。

--

我会为此使用jQuery。我的想法如下。

你会得到 <div> 的宽度,然后将 <li> 的所有宽度相加,看看它们是否更大。然后根据需要取出尽可能多的内容,以便 <li> 适合 <div>。

然后将您取下的所有内容添加到一个新的 <li> 中,并使用另一个 <ul> 作为下拉菜单。

我很高兴为此写点东西,但要等我完成工作后再写。

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

于 2013-05-08T13:16:18.433 回答