ブートストラップ - アイコン

Question

とサイドバートグル私は、このようなレイアウトを持っている：

私は1つのオレンジ色のボタンをクリックすると、サイドバーが表示アイコンのみを縮小し、去ることをしたいと思います。そして、携帯電話は完全に縮小する必要があり、ボタンをクリックするとアイコンだけが表示されるはずです。動作はthisのようにする必要がありますが、私はそれを動作させる方法を理解していません。今の

私は私のヘッダー持っている：あなたは2クラス（1を割り当てることができラフように

<div class="navbar-header"> 
    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a> 
    <a class="navbar-brand" href="#">...</a> 
</div> 

をしかし、私は1をクリックしたときに、それが崩壊にする方法がわからない...おかげ

Answer 1

クラス "icon"とクラス "text"のような、相対的なテキストのためのもの）、そしてボタンクリックで、クラス "text"を持つ要素をトグル（非表示と表示）します。次にコールバックで、サイドバーのサイズ変更をアニメートすることができます。

EDIT2：改善された例

$('#togglebutton').click(function() { 
 
    if ($(window).width() > 500) { //your chosen mobile res 
 
     $('.text').toggle(300); 
 
    } else { 
 
     $('.menu').animate({ 
 
     width: 'toggle' 
 
     }, 350); 
 
    } 
 
});

​.wrapper { width: 100% } 
 
.menu { 
 
     background: #222; 
 
     float: left; 
 
     display: block; 
 
} 
 

 
.icon { max-width: 1em } 
 

 
.menu ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0.2em 0.5em; 
 
} 
 

 
.menu li { margin: 0 } 
 

 
.menu a, .menu a:visited { 
 
     color: white; 
 
     text-decoration: none; 
 
} 
 

 
.text { 
 
     display: inline; 
 
     margin: 0; 
 
} 
 

 
.content { display: block; } 
 

 
button { margin: 1em; } 
 

 
@media only screen and (max-width: 500px) { 
 
    .text { 
 
     display: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="icon" src="http://bit.do/iconUrl"> 
 
      <p class="text">Text 1</p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="icon" src="http://bit.do/iconUrl"> 
 
      <p class="text">Text 2</p> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="content"> 
 
    <button id="togglebutton">&#9776;</button> 
 
    </div> 
 
</div>

は、私の提案の一般的な考えを持つことが有用であった願っています。

Answer 2

"オフキャンバス"のサイドバーを作成してから、ブートストラップの応答ユーティリティクラスを使用してアイコンの表示を切り替えることができます。

<div class="wrapper"> 
     <div class="row row-offcanvas row-offcanvas-left"> 
      <!-- sidebar --> 
      <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar"> 
       <ul class="nav" id="menu"> 
        <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li> 
        <li><a href="#"><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li> 
        <li><a href="#"><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li> 
        <li><a href="#"><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li> 
       </ul> 
      </div> 

      <!-- main right col --> 
      <div class="column col-sm-9 col-xs-11" id="main"> 
       <a href="#" data-toggle="offcanvas" class="btn btn-default"><i class="fa fa-navicon"></i></a> 
       <p> 
        content... 
       </p> 
      </div> 
     </div> 
</div> 

http://www.codeply.com/go/ecE6qHNBOC