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

你可以创建一个＆＃34; off canvas＆＃34;侧栏，然后使用Bootstrap的响应实用程序类来切换图标的显示。

 File "/usr/lib/python2.7/multiprocessing/pool.py", line 227, in map
    return self.map_async(func, iterable, chunksize).get()
 File "/usr/lib/python2.7/multiprocessing/pool.py", line 528, in get
    raise self._value
 pymongo.errors.NetworkTimeout: mongoDb:port number : timed out

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>

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

Bootstrap - 使用图标

2 个答案: