javascript - 当它们比屏幕长时将 lis 转到下拉列表

Question

我想要一个屏幕灵活的菜单。当 ul 宽度小于屏幕时，所有 li 为：

Menu1     Menu2      Menu3       Menu4

但是如果 ul 太长或者屏幕变小：

 Menu1      Menu2      Menu3       Menu4        Menu5      Menu6      More >

使屏幕上的 ul 宽度更长的其他菜单（Menu7、Menu8）列在新菜单“更多”的下拉列表中

Answer 1

您必须使用媒体查询。基本上媒体查询允许您根据浏览器的大小和其他此类动态功能来更改元素的 css。你可以在这里参考这个小提琴。

我所做的是使用列表元素创建了您的标准导航栏

<div class="navbar">
    <button class='small-nav'>Navigation</button>
    <div class='nav-container'></div>
    <div class="navbar-list">
        <ul>
            <li class="active"><a href="#menu1">Menu1</a>
            </li>
            <li><a href="#menu2">Menu2</a>
            </li>
            <li><a href="#menu3">Menu3</a>
            </li>
            <li><a href="#menu4">Menu4</a>
            </li>
        </ul>
    </div>
</div>

之后，默认情况下，我隐藏了按钮和最终将保存列表项的导航容器。现在在浏览器调整大小时，媒体查询将隐藏主列表并显示按钮

@media (max-width:480px) {
    .navbar-list ul {
        display:none;
    }
    .small-nav {
        display:inline;
    }
}

单击按钮后，可以查看和单击您的列表内容。

var list = $('.navbar-list').html();
$('.nav-container').append(list);
$('.small-nav').click(function () {
    $('.nav-container').toggle();
})

由于媒体查询没有为 ul li 元素指定显示样式，它们将被视为典型的项目列表。

使用 Bootstrap 折叠插件在 Twitter Bootstrap 中说明了一种更简单、更快速的方法。在此处参考此链接