javascript - 折叠 Bootstrap 侧边栏

Question

我已经在 stackoverflow 上搜索了很长时间，但仍然找不到答案。

有什么方法可以让导航栏使用 bootstrap 折叠到一边？我的意思是你通常有水平导航栏，然后当缩小时，它会从侧面出现，而不是在单击按钮时从上到下下降。那有意义吗？对不起，我正在屠杀这个，但这有点难以解释。

感谢您的帮助。

Answer 1

如果没有别的，这可能会给你一个开始的基础。

这使用它自己的数据属性来替换默认的 data-toggle="collapse"当视口(viewport)小于 768px 时，剩下的只是将导航转换为侧边栏。导航链接包含在 <div class="navbar-default side-collapse open"> 中它为侧边栏添加了所需的 CSS，并用默认类替换了通常会出现的元素。

将此示例与 Docs 中的默认值进行比较查看更改。

查看工作示例代码段

$(document).ready(function() {
  $('[data-toggle=collapse-side]').click(function(e) {
    $('.side-collapse').toggleClass('open');
  });
});

@media screen and (max-width: 768px) {
  .navbar-side .side-collapse {
    top: 50px;
    bottom: 0;
    left: 0;
    width: 256px;
    position: fixed;
    overflow: auto;
    transition: all 0.3s cubic-bezier(.87, -.41, .19, 1.44);
  }
  .navbar-side .side-collapse.open {
    width: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-side navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button data-toggle="collapse-side" data-target=".side-collapse" type="button" class="navbar-toggle"><span class="sr-only">Toggle navigation</span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
      </button> <a class="navbar-brand" href="#">Brand</a> 
    </div>
    <div class="navbar-default side-collapse open">
      <div class="navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
          </li>
          <li><a href="#">Link</a> 
          </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="#">Link</a> 
              </li>
              <li><a href="#">Link</a> 
              </li>
              <li><a href="#">Link</a> 
              </li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span>

              </button>
              </span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</nav>
<div class="container">
  <div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>

    </button> <strong>YUP!</strong>

  </div>
</div>