ブートストラップサイドメニュー：崩壊は、私がこのテーマで探しています

Question

小さな画面上で最小化し、私が（賢明なサイドバー）を探しています何のまさに完璧です：私は、メニューボタンをしたいhttp://themesdesign.in/webadmin_1.1/layouts/green/index.html

1. ことすべてのサイドバーメニューを保持しながら、サイドバーを拡大/縮小します。

2. XS画面では、サイドバーを非表示にしたいが、そのメニューボタンを押すとポップアップします。

これは、私はコードの中で、これまで持っているものです。

 <nav class="navbar-default navbar-static-side" role="navigation"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#side-menu" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <div class="sidebar-collapse hidden-xs"> 
      <ul class="nav navbar-collapse collapse" id="side-menu"> 
       <li class="nav-header"> 
        <h2 style="color: #e8e8e8"></h2> 
        <h6 class="" style="color:#808080;">By: </h6> 
       </li> 
       <li> 
        <a class="active" data-toggle="collapse" data-target="#firstMenu" aria-expanded="true" aria-controls="navbar"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a> 
        <ul class="side-menu-ul collapse in" id="firstMenu"> 
         <li><a href="index-2.html">Dashboard v.1</a></li> 
         <li class="active"><a href="dashboard_2.html">Dashboard v.2</a></li> 
         <li><a href="dashboard_3.html">Dashboard v.3</a></li> 
         <li><a href="dashboard_4_1.html">Dashboard v.4</a></li> 
         <li><a href="dashboard_5.html">Dashboard v.5 </a></li> 
        </ul> 
       </li> 
       <li> 
        <a data-toggle="collapse" data-target="#secondMenu" aria-expanded="false" aria-controls="navbar"><i class="icon ion-email"></i><span>Mail Box</span> </a> 
        <ul class="side-menu-ul collapse" id="secondMenu"> 
         <li><a href="mail-inbox.html">Inbox</a></li> 
         <li><a href="mail-compose.html">Compose Mail</a></li> 
         <li><a href="mail-single.html">Single Mail</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </nav> 

があまりない設計経験を持って、私はここから続行する方法については本当にわかりません。特にボタンをクリックする部分がサイドナビゲーションバーを最小限にする部分。誰でも私を助けることができるだろうか？

編集：もう一つの大きな例がここにあります：http://blog.codeply.com/2016/05/18/bootstrap-sidebar-responsive-examples/「左側のサイドバーがアイコンに崩壊する」というセクションが私が探しているものです。しかし、その問題は、アイコンに折りたたまれているときに、メニューのサブアイテムを表示しないということです。

Answer 1

ボタンをクリックすると、クリックイベントを使用してアプリケーションの状態を更新できます。

https://developer.mozilla.org/en-US/docs/Web/Events/click

あなたのサイドバーで別のCSS状態から行っているので、あなたの最善の策は、おそらくCSSの両方のソリューションを作ることであろう。この方法で、ボタンのonclickイベントを通じて親コンテナクラスを変更できます。

あなたはそれが例えば閉じたい場合は、あなたのサイドバーにclosedクラスを追加して使用することにより下向きにあなたのclosed CSSカスケードを持っているでしょう：

.closed .child-element {} 

を閉じた状態の子要素をターゲットにします。