모바일보기에서 하단 대신에 측면에서 내비게이션 막대 슬라이드

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