将 Offcanvas 与 Bootstrap 3 Navbar Fixed Top 一起使用

Question

我正在构建一个菜单相当大的网站，但不喜欢 BS3 附带的折叠菜单。我想使用抽屉/关闭画布菜单，例如 BS3 的 offcanvas JS 示例中的菜单（或任何其他可以解决问题的插件 - 必须包括对下拉菜单的支持），但该示例仅在侧边栏菜单/导航上执行。如何使它与我当前的导航一起使用？

示例如下：http://getbootstrap.com/examples/offcanvas/

我需要该功能，但应用于顶部菜单而不是侧边栏。

HTML

<nav id="navbar-main" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
        <button type="button" id="menu-trigger" 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 id="main-menu" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
  </div>
</nav>

Answer 1

好的，对于遇到此问题的任何人，我使用 Jasny Bootstrap 的 Offcanvas 功能解决了这个问题。

工作示例：http://jasny.github.io/bootstrap/examples/navbar-offcanvas/