寻找Jasny Bootstrap插件相同的菜单桌面顶部和画布侧的例子

Question

我认为这将是相当容易的，但我似乎不能弄清楚如何获得相同的菜单作为顶部导航条在较大的设备和侧滑动在较小的设备上使用Jasny Bootstrap插件。所有的例子似乎都在侧面，只是在full (on the SIDE)和hamburger之间切换。我需要把"桌面"放在顶部，把"移动"放在左边。任何想法或链接到一个例子将是伟大的!下面是两边都在的例子

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>