Menü durch Klicken ändern - Bootstrap

Question

Ich möchte ein Dashboard-Menü haben. Wenn ich auf das Burger-Symbol klicke, muss sich das Menü wie auf den Bildern ändern.

Daraus:

Um dies:

Hier ist mein Code: 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

Bitte versuchen Sie es mit der untenstehenden URL, ich habe einige CSS und JS hinzugefügt.

.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