寻找 Jasny Bootstrap 插件相同的菜单桌面 TOP 和 off-canvas SIDE 示例

Question

我认为这会相当容易，但我似乎无法弄清楚如何使用 Jasny Bootstrap 插件在较大设备上获得与 TOP 导航栏相同的菜单，在较小设备上获得与 SIDE 滑入相同的菜单。所有的例子似乎都在侧面，只是在完整（侧面）和汉堡包之间切换。我需要顶部的“桌面”，以及左侧的“移动”作为滑入。任何想法或示例链接都会很棒！这是example，两边都有。

Answer 1

我想这就是你所说的：

$(document).ready(function() {
  var sideslider = $('[data-toggle=collapse-side]');
  var sel = sideslider.attr('data-target');
  sideslider.click(function(event) {
    $(sel).toggleClass('in');
  });
});

body {
  padding-top: 60px;
}
.navbar-default {
  padding-right: 8px;
}
.navbar .navbar-toggle {
  border: none;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background: #f5f5f5;
}
.navbar-header .navbar-toggle .icon-bar {
  background: #444;
}
.navbar-header .navbar-toggle .icon-bar:hover {
  background: #444;
}
.side-collapse-container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  -webkit-border-radius: 0;
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0;
  border-radius: 0;
  background: #ddd;
  -webkit-box-shadow: inset 0 0 6px #ddd;
}
::-webkit-scrollbar-thumb:window-inactive {
  background: #ddd;
}
@media screen and (max-width: 768px) {
  .side-collapse {
    top: 50px;
    bottom: 0;
    left: 0;
    width: 256px;
    position: fixed;
    overflow: auto;
    transition: all 0.6s cubic-bezier(.87, -.41, .19, 1.44);
  }
  .side-collapse.in {
    width: 0;
  }
  .navbar-nav li.dropdown {
    padding-right: 0;
  }
  .navbar-default {
    padding-right: 0;
  }
  .navbar .navbar-default {
    border-right: 1px solid #ddd;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <nav class="navbar navbar-fixed-top navbar-default">
    <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 in">
      <nav role="navigation" 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 <i class="fa fa-chevron-down"></i></a>

            <ul class="dropdown-menu">
              <li><a href="#">Link</a> 
              </li>
              <li><a href="#">Link</a> 
              </li>
              <li><a href="#">Link</a> 
              </li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Link</a> 
              </li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Link</a> 
              </li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search" />
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <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 <i class="fa fa-chevron-down"></i></a>

            <ul class="dropdown-menu">
              <li><a href="#">Link</a> 
              </li>
              <li><a href="#">Link</a> 
              </li>
              <li><a href="#">Link</a> 
              </li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Link</a> 
              </li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Link</a> 
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </nav>
  <div class="side-collapse-container">
    <div class="alert alert-info alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>

      </button> <strong>Warning!</strong> This is an Off-Canvas Mobile Menu</div>
  </div>
</div>