Question

我有一个网站，我有一行导航项目。当我减少页面宽度项目下降到第二行。看到BBC非常聪明的解决方案，当页面太窄而无法容纳所有列表项时会创建一个“更多”下拉列表，我想知道是否有人遇到了同样的jquery教程或插件？ / p>

修改

例：`

<nav>
    <ul>
        <li><a href="">Lorem ipsum.</a></li>
        <li><a href="">Reprehenderit, similique.</a></li>
        <li><a href="">Est, nobis.</a></li>
        <li><a href="">Incidunt, sequi.</a></li>
        <li><a href="">Nulla, ducimus.</a></li>
        <li><a href="">Nulla, nobis.</a></li>
        <li><a href="">Deserunt, aspernatur?</a></li>
        <li><a href="">Minima, tempore.</a></li>
    </ul>
</nav>`

当页面开始缩小时，我正在寻找：`

<nav>
    <ul>
        <li><a href="">Lorem ipsum.</a></li>
        <li><a href="">Reprehenderit, similique.</a></li>
        <li><a href="">Est, nobis.</a></li>
        <li><a href="">Incidunt, sequi.</a></li>
        <li><a href="">Nulla, ducimus.</a></li>
        <li><a href="">Nulla, nobis.</a></li>
        <li><a href="#">More</a>
            <ul>
                <li><a href="">Deserunt, aspernatur?</a></li>
                <li><a href="">Minima, tempore.</a></li>
            </ul>
        </li>
    </ul>
</nav>

` 即。任何比外部ul更宽的东西都会移动到“更多”中，可以将其设置为下拉列表。

感谢。

杰米

Answer 1

CSS @media查询，也许只需要一点Jquery即可。在没有先提供一些代码示例的情况下，无法为您提供可行的解决方案。

Answer 2

您可以使用响应式设计和媒体查询来制作它。首先，您可能有兴趣使用一些css框架，如Bootstrap或类似的。

单行导航溢出

2 个答案: