navbar slide from side of mobile view

Question

navbarをモバイルビューではなく、右側からスライドさせることは可能ですか？私はデフォルトのブートストラップナビゲーションバーを使用しており、色をカスタマイズしています。同様に私はサブメニューの意志を持っている場合、それは同じ方法（右から左にスライド）で動作します。助けてください。

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