Question

我使用navbar-fixed-top并且我喜欢我的菜单项在点击汉堡图标时在导航栏下方显示为全宽。

菜单应该一直显示在屏幕的底部。当菜单打开时，汉堡图标应该变为X图标。

无论访问者使用什么设备，都会发生此行为。

这是我的dev site，这是一个模型：

mockup

如您所见，我已经实现了全宽度菜单项，但我不确定如何执行以下操作：

达到所需的高度
在切换时将汉堡图标更改为X.

有什么想法吗？

Answer 1

首先，您需要移除.navbar-collapse的所有固定最大高度，将其设置为340px，然后将导航上的高度设置为100vh

.navbar-collapse {
    height: 100vh;
}

这会将导航栏的高度设置为整个视口高度。

其次，对于按钮尝试使用字体图标（即fontawesome）并定位按钮状态类.collapsed以添加不同的图标。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
    <i class="icon fa fa-bars"></i>
</button>

然后用X关闭栏图标以关闭

.navbar-toggle.collapsed .icon:before {
    content: '\f00d';
}

如果您希望使用默认引导条，并将它们设置为X，您可以查看这个小提琴https://jsfiddle.net/gndkmc5y/

您所要做的就是将顶级，中级和底级类设置为条形。

Answer 2

韦德兰·贾伊克（Vedran Jaic）的回答部分正确（谢谢！），但我只花了一点时间便使它能够正常工作并动画流畅。拳头我必须在nav内添加一个100vh的空绝对位置div（'＃navbar-expander'），这将有助于在过渡期间设置navbar的高度，否则它将使用内部相对位置的元素（按钮）的高度导航，这会导致动画停顿。可能有更好的方法来设置该高度，但这对我有用，我会顺其自然...

<div id='navbar' class="collapse navbar-collapse">
    <div class='navbar-expander'></div>
    <ul class="nav navbar-nav navbar-left">
            {{# each navLinks}}
            <li {{#ifeq ../section key}}class="active"{{else}}{{/ifeq}}>
                <a href="{{ href }}">{{ label }}</a>
            </li>
        {{/each}}
    </ul>
</div>

然后设置包括根据需要添加/删除的引导程序过渡的类（以下仅在超小型设备上显示全屏导航，但您可以删除要在所有设备上使用的媒体查询）：

.navbar-expander{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height:100vh;
    display:none;
}


@media screen and (max-width: $screen-sm-min) {

    .navbar-collapse, 
    .navbar-collapse.collapse,
    .navbar-collapse.in, 
    .navbar-collapse.collapsing{
        max-height: 100vh;  
    }
    .navbar-collapse.in{
        height: 100vh;
    }   

    .navbar-expander{
        display:block;
    }
}

关于更改图标，此链接中的代码片段对我来说非常流畅，所以我想分享一下： https://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/#comment-2052292201

所有设备上的引导程序全屏菜单

2 个答案: