Bootstrap - 用图标切换侧边栏

Question

我有这样的布局:

我希望当单击橙色按钮时,侧边栏会缩小并仅显示图标.并且对于移动设备应该完全缩小,当单击按钮时,只有图标应该是可见的.行为应该像这样,但我不知道如何使它发挥作用.

现在我有我的标题:

<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

您可以创建"画布外"侧边栏,然后使用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

Answer 2

粗略地讲，您可以分配2个类（一个用于图标，一个用于相对文本），例如，类“ icon”和类“ 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>

希望对我的建议有一个大致的了解是有用的。