Bootstrap - Переключение боковой панели с иконками

Question

У меня есть такой макет:

Я хотел бы, что, когда один нажимает на оранжевую кнопку, боковая панель сжимается и оставляет только иконки видны. И для мобильных устройств должны полностью сокращаться, и когда один клик на кнопке, должны быть видны только значки. Поведение должно быть как this, но я не понимаю, как заставить его работать.

Сейчас у меня есть заголовок:

<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> 

Но я не знаю, как сделать это разрушится, когда один щелкает .. Спасибо

Answer 1

В грубом образом можно назначить 2 класса (один для значка, один для относительного текста), например, «значок» и «текст» класса, а при нажатии кнопки переключение (скрыть и показать) элемент с классом «текст». Затем в обратном вызове вы можете анимировать изменение размера боковой панели.

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

Вы можете создать боковую панель «off canvas», а затем использовать класс утилиты Bootstrap, чтобы переключать отображение значков.

<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