使自举导航在移动，扩大从左侧，而不是下降。

Question

更多的是后端的家伙，只是寻找一些方向，在XS自定义引导，基本上是像亚马逊的手机应用程序。

我想要导航扩展菜单按钮使导航从左边弹出而不是下降。在引导程序中是否有一个很好的方法来做到这一点，还是最好只编写一些自定义的东西？如果自定义是最好的，那么最好尝试重写数据目标/数据切换，还是只执行js onClick并运行我的代码？

还会有可扩展的子菜单/下拉菜单，比如Amazons即时视频和应用程序，这是最好的书面定制，还是在引导中有一个很好的方法？我知道引导程序中的下拉菜单，但并不真正了解如何扩展菜单选项。

提前致胜。

Answer 1

下面是一个使用自定义代码和jQuerys toggleClass的引导组件来启动移动离开画布菜单的示例。如果要使用框架，您应该尽可能多地使用内置的功能，我认为这个示例就是这样做的：小提琴

<div class="container-fluid">
    <nav class="navbar navbar-fixed-top navbar-default">
        <div class="navbar-header">
            <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle"><span class="sr-only">Toggle navigation</span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
            </button> <a class="navbar-brand" href="#">Brand</a> 
        </div>
        <div class="navbar-default side-collapse in">
            <nav role="navigation" class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
                    </li>
                    <li><a href="#">Link</a> 
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="fa fa-chevron-down"></i></a>

                        <ul class="dropdown-menu">
                            <li><a href="#">Link</a> 
                            </li>
                            <li><a href="#">Link</a> 
                            </li>
                            <li><a href="#">Link</a> 
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Link</a> 
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Link</a> 
                            </li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search" />
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a> 
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="fa fa-chevron-down"></i></a>

                        <ul class="dropdown-menu">
                            <li><a href="#">Link</a> 
                            </li>
                            <li><a href="#">Link</a> 
                            </li>
                            <li><a href="#">Link</a> 
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Link</a> 
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Link</a> 
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </nav>
    <div class="side-collapse-container">
        <div class="alert alert-info alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>

            </button> <strong>Warning!</strong> This is an Off-Canvas Mobile Menu</div>
    </div>
</div>