Question

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

Menu1     Menu2      Menu3       Menu4

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

 Menu1      Menu2      Menu3       Menu4        Menu5      Menu6      More >

其他菜单（Menu7，Menu8）使ul宽度超过该屏幕列在新菜单的下拉菜单中“更多”

Answer 1

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

我所做的是我使用列表元素

创建了标准导航栏

<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>

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

@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中说明了一种更简单，更快捷的方法。请参阅此链接here

当列表长于屏幕时，将列表转到下拉列表

1 个答案: