클릭하여 메뉴 이동 - 부트 스트랩

Question

대시 보드 메뉴가 필요합니다. 햄버거 아이콘을 클릭하면 메뉴가 그림과 같이 바뀌어야합니다. 이에서

: 여기에

: 여기

내 코드입니다 : HTML

  <span class="glyphicon glyphicon-menu-hamburger"></span> 
      <ul class="nav navbar-nav"> 
      <!-- Line 1--> 
       <li class="listyle" > 
        <a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed"> 
       <span style="color:#e20074"> <span class="glyphicon glyphicon-cloud"></span>&nbsp; 1. Item</span> 
        </a> 
        <div class="collapse" id="toggleDemo" style="height: 0px;"> 
        <ul class="nav nav-list"> 
         <li><a href="#">Submenu1.1</a></li> 
         <li><a href="#">Submenu1.2</a></li> 
         <li><a href="#">Submenu1.3</a></li> 
        </ul> 
        </div> 
       </li> 
       </ul> 

Answer 1

아래 URL을 사용해보십시오. CSS 및 JS가 추가되었습니다.

.navbar-nav { 
     width:200px; 
     transition:all 0.8s ease; 
    } 
    .glyphicon{ 
     transition:all 0.9s ease; 
    } 
    .navbar-nav li{ 
     width:200px; 
    } 
    .someClass { 
     width:50px; 
     overflow:hidden; 
     display:block; 

    } 
    .someClass .glyphicon{ 
     color:#0f0d9f; 
     font-size:30px; 
    } 



$('.glyphicon-menu-hamburger').click(function() { 
    $(".navbar-nav").toggleClass("someClass"); 
}); 

ref url