javascript - 切换 Bootstrap 4 桌面导航的滑入动画

Question

我希望通过一个简单的切换按钮展开和折叠桌面版的 Bootstrap 4 导航。

示例是一个菜单按钮，点击后会将菜单项最小化到屏幕左侧。

[菜单]

[菜单]链接链接链接链接链接

但是 Bootstrap 默认值不提供所需的结果。

        <nav class="navbar navbar-expand-md navbar-light bg-light main-nav">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse w-100">
                <ul class="nav navbar-nav w-100">
                    <li class="nav-item active nav-breaker">
                        <a class="nav-link" href="#">Menu</a>
                    </li>

                    <li class="nav-item active">
                        <a class="nav-link" href="#">Shop</a>
                    </li>  
                    <li class="nav-item">
                        <a class="nav-link" href="#">Haircare</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Gallery</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Offers</a>
                    </li>
                    <li class="nav-item nav-breaker">
                        <a class="nav-link" href="#">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Book Appointment</a>
                    </li>
                </ul>
            </div>

            <a class="navbar-brand order-first order-md-0 mx-0" href="#">Shear Success</a>

            <div class="collapse navbar-collapse w-100">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Sign In</a>
                    </li>
                </ul>
            </div>

        </nav>

Answer 1

简短的回答是，更改 Bootstrap 的默认导航栏动画并不容易。但是，我已经帮您解决了大部分问题:https://www.codeply.com/go/1VhJAMNHEO

1. 您的标记不符合 boostrap 标准。修复您的 html，以便您遵循概述的 boostrap 标准 here .请参阅标有“左侧有切换器...”的部分
2. 从导航中删除 navbar-expand-md 类，使菜单默认折叠
3. 覆盖 Bootstrap 的默认样式以实现所需的“从左侧滑入”效果。这说起来容易做起来难。特别是导航栏添加了一个很容易错过的临时类 .collapsing。
4. 这会弄乱响应式样式，需要更多关注，即媒体查询。

老实说，如果你想让导航栏做文档中列出的以外的任何事情，我发现从头开始编写我自己的大部分样式和脚本更容易，只利用基本的 .navbar 和 .navbar-nav 等样式类