Twitter bootstrap 引导程序3和mmenu

我想实现bootstrap3，但我被卡住了。我想有顶部导航和折叠时，我希望它改变为左滑动菜单。提前谢谢你的帮助

---

编辑：我做了这个：。如果有人想贡献。

这可以在不添加CSS的情况下完成

我建议您创建两种不同的导航：

• 用于

  -sm

  、

  -md

  和

  -lg

  设备的

  .navbar.navbar固定顶

• 用于

  -xs

  设备的

  侧边栏

有关工作示例，请参见

注释示例：

<!-- Classic nav -->
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <!-- We change data-toggle to "offcanvas" -->
      <button type="button" class="navbar-toggle" data-toggle="offcanvas">
        <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="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="container">

  <!-- You can use .row-offcanvas-left or .row-offcanvas-right -->
  <div class="row row-offcanvas row-offcanvas-left">

    <!-- Here is the offcanvas nav, with .visible-xs class -->
    <div class="col-xs-6 visible-xs sidebar-offcanvas" id="sidebar" role="navigation">
      <div class="list-group">
        <a href="#" class="list-group-item active">Home</a>
        <a href="#" class="list-group-item">About</a>
        <a href="#" class="list-group-item">Contact</a>
      </div>
    </div>

    <div class="col-12">
      Content
    </div>

  </div>

</div>

还有几行JS：

$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

---

@zessx-我喜欢你的css解决方案，但是侧菜单的css转换似乎只在Safari上有动画效果。我在Chrome版本32.0.1700.77和Firefox 26.0（Mac）上试过，它仍然可以工作，但在这两种状态之间没有动画效果。你知道这是为什么吗？谢谢。我查过了，这个转换在Chrome31下工作，但在Chrome32/33下不再工作了。我将尝试查找问题的根源，但这似乎是一个浏览器问题。@purgeru我已经尝试过，但似乎运气不佳，在chrome 42.0.2311.135（64位）上不适用于我yosemite@LafifAstahdziq我将不得不更新，因为代码已更改。甚至我的演示也没有正确显示。

$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});