切换 Bootstrap 4 桌面导航的滑入式动画答案

【问题标题】：Toggle Slide-In Animation for Bootstrap 4 Desktop Navigation切换 Bootstrap 4 桌面导航的滑入式动画
【发布时间】：2019-09-10 23:51:27
【问题描述】：

我希望通过一个简单的切换按钮来展开和折叠桌面版 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>

【问题讨论】：

标签： javascript jquery html css bootstrap-4

【解决方案1】：

简短的回答是，更改引导程序的默认导航栏动画并不容易。但是，我在其中大部分时间都得到了你：https://www.codeply.com/go/1VhJAMNHEO

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

老实说，如果您希望导航栏执行文档中列出的内容之外的任何操作，我发现从头开始编写我自己的大部分样式和脚本更容易，只利用基本的 .navbar 和 .navbar-nav等样式类

【讨论】：