单击 - Bootstrap更改菜单

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

请尝试使用以下网址，我添加了一些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