导航栏从侧面滑动而不是移动视图中的底部

Question

是否可以在移动视图中将导航栏从右侧滑动到底部？我使用的是默认的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