終了時のブートストラップサイドバーを折りたたみ可能に変更する

Question

私はトップナビゲーションバーとサイドバーを持つブートストラップで自分のプロジェクトを構築しました。私のプロジェクトで

http://www.makerstudios.com/

しかし、サイドバーのページの左側にある：

は今、私はこのような折りたたみ式は、サイドバーを作成する必要があります。最小限の変更でこのサイドバーを折りたたむことができますか？

HTML：

<div class="col-md-3"> 
    <div class="navbar-default sidebar" role="navigation"> 
     <div class="sidebar-nav"> 
      <ul class="nav" id="side-menu"> 
       <li>...</li> 
       <li>...</li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

あなたは、簡単なjqueryのを使用することができます。

まず、オフスクリーンにするためにサイドバーを設定する必要があります。これは、その後、あなたがメニューを引き出すことにしたいボタンをクリックする上でリッスンjqueryのコードを、確認する必要があり

.sidebar { 
    left: -300px // For example 
} 

を追加することによって行うことができます。ボタンが押されると

、jqueryのコードは、サイドバーを再度表示させると、visble範囲（左：0;）にそれを持っていけば

<script> 


$(function(){ 
    $("#menu").click(function open(){ 
     $('.sidebar').animate({ left: '0'}, 500); 
     });//opening it 
    $("#close").click(function close(){ 
     $('.sidebar').animate({ left: '-200px'}, 500); 
    });// 'Closing it'. Takin it back off -screen within the timewindow of 500ms 
    }); 


</script> 

あなたが今しなければならないだろうだから何、ですオフスクリーンバーを設定して、開閉のボタンを作成します。

このソリューションは、サイドバーを既存のボディの上に置くことになりますが、リンクしているサイトと同じようにしたい場合は、jqueryにコマンドを追加するだけですコンテンツ部分（表示部分）をサイドバーの移動量と同じ量だけ移動します。