jquery - 在移动 View 中导航栏从侧面而不是底部滑动

Question

是否可以在移动 View 中让导航栏从右侧而不是底部滑动。我使用的是默认的 bootstarp 导航栏，我已经自定义了颜色。同样，如果我有子菜单，它会以相同的方式工作(从右向左滑动)。请帮忙。

html代码: 菜单

<div class="navi_links col-xs-12 col-sm-7 col-md-7 col-lg-7">
                          <!-- nav bar main links --->
                           <div class="collapse navbar-collapse main-menu" id="bs-example-navbar-collapse-1">
                               <ul class="nav navbar-nav">
                                   <!--- link 1 and sub nagigation --->
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PRODUCTS <span class="caret"></span></a>
                                        <ul class="dropdown-menu main-menu-sub">
                                            <li><a href="#">Unit Coolers</a></li>
                                            <li><a href="#">Condensing Units</a></li>
                                            <li><a href="#">Condensers &amp; Fluid Coolers</a></li>
                                            <li><a href="#">Systems</a></li>
                                            <li><a href="#">Others</a></li>
                                            <li><a href="#">Check Inventory</a></li>
                                        </ul>
                                    </li>

                                    <!--- link 1 and sub nagigation --->
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects <span class="caret"></span></a>
                                        <ul class="dropdown-menu main-menu-sub">
                                            <li><a href="#">Create A Project</a></li>
                                            <li><a href="#">My Project</a></li>
                                            <li><a href="#">My Address Book</a></li>
                                        </ul>
                                    </li>

                                    <!--- link 1 and sub nagigation --->
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Orders <span class="caret"></span></a>
                                        <ul class="dropdown-menu main-menu-sub">
                                            <li><a href="#">Create A Order</a></li>
                                            <li><a href="#">My Orders</a></li>
                                            <li><a href="#">Shipping Details</a></li>
                                            <li><a href="#">Invoices</a></li>
                                        </ul>
                                    </li>

                                    <!--- link 1 and sub nagigation --->
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tools <span class="caret"></span></a>
                                        <ul class="dropdown-menu main-menu-sub">
                                            <li><a href="#">Quick Submittal Drawings</a></li>
                                            <li><a href="#">Quick Box Load Calculator</a></li>
                                            <li><a href="#">Detailed Box Load Calculator</a></li>
                                            <li><a href="#">Quick Energy Calculators</a></li>
                                            <li><a href="#">Parts Lookup</a></li>
                                        </ul>
                                    </li>

                                    <!--- link 1 and sub nagigation --->
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resources <span class="caret"></span></a>
                                        <ul class="dropdown-menu main-menu-sub">
                                            <li><a href="#">Literature</a></li>
                                            <li><a href="#">My Programs</a></li>
                                            <li><a href="#">Training</a></li>
                                            <li><a href="#">Contractor Network</a></li>
                                            <li><a href="#">Co-op Advertising</a></li>
                                        </ul>
                                    </li>

                                    <!--- link 1 and sub nagigation --->
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Support <span class="caret"></span></a>
                                        <ul class="dropdown-menu main-menu-sub">
                                            <li><a href="#">Customer Service</a></li>
                                            <li><a href="#">Technical Support</a></li>
                                            <li><a href="#">Contact Us</a></li>
                                            <li><a href="#">FAQ</a></li>
                                            <li><a href="#">Warrant</a></li>
                                        </ul>
                                    </li>

                                  </ul>
                          </div><!-- /.navbar-collapse -->
                       </div>

Answer 1

这是您要找的吗？查看链接。

https://jsbin.com/zacefalowa/1/edit?html,css,js,output