jquery - 将 Mmenu 集成到 Bootstrap 中

Question

我想将Jquery Mmenu集成到Bootstrap中，以自动让Bootstrap切换到具有响应式设计的滑动左侧菜单，而不是显示 native 顶部垂直响应式菜单。

有什么想法或方法吗？

Jquery M菜单:http://mmenu.frebsite.nl

提前谢谢大家。

杰伊。

Answer 1

嗯，几个小时前我开始了同样的任务，我希望在这里找到答案来帮助我。

我现在已经开始工作了，尽管我是 Bootstrap 的新手，但我将分享我学到的东西。如果您发现新手错误，其他人可以随时插话。我想是时候返回社区了，因为我的许多问题都在这里得到了解答。

这里是:

查看这个 jsFiddle 以查看我完整的示例代码和演示:http://jsfiddle.net/acterry/fMYpg/

您将使用垂直分隔线来查看导航从一种样式变为另一种样式。

我想使用相同的 nav ul 来驱动两个菜单。但是在查看了 Jquery.mmenu 的源代码之后，我看到了以下我知道会导致问题的事情:

• mmenu 将新容器(默认为 div)包裹在 HTML 中
• mmenu 修改菜单 ul 的方式可能会吓坏 Bootstrap 导航栏
• mmenu 没有功能销毁自身并撤消它引起的 DOM 更改

作为概念证明，我可以使用 Bootstrap 预定义的响应断点来确定显示哪种导航样式。

这是菜单部分的 HTML

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="visible-desktop navbar-inner">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->  
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/">My Site</a>
      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav" id="mainSiteMenu">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">Link 1</a>
          </li>
          <li><a href="#">Link 2</a>
          </li>
          <li><a href="#">Link 3</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="hidden-desktop navbar-inner">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" href="#mainSiteMenuMMenuNav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/">My Site</a>
    </div>
  </div>
</div>
<nav id="mainSiteMenuMMenuNav"></nav>

以下是步骤的快速分割:

1. (上面未显示)如果页面上的所有 HTML 尚未位于单个容器中，请将其包装在 div 中。如果您使用的是 div 以外的其他内容，请在 mmenu 配置中适当设置 pageNodetype
2. 定义您的导航 ul，如 Bootstrap 组件页面上所示。但是，请为 UL 提供一个 ID，以便我们稍后可以引用。
3. 复制导航栏内部 div
4. 在第一个导航栏内部，将visible-desktop添加到div的类参数中——这是将向桌面用户显示的导航栏。 Bootstrap 会将其隐藏在桌面/平板电脑宽度断点下方
5. 在第二个navbar-inner中，将hidden-desktop添加到div的类参数中 - 这是将显示在平板电脑/手机(或默认情况下浏览器宽度小于940px的任何其他设备)上的导航栏
6. 在导航栏的关闭 div 之后添加一个带有 ID 的空导航容器(我使用了 mainSiteMenuNav)。这是 mmenu 的 UL 所在的位置。
7. 在我的代码中，请注意第二个导航栏内部的 btn-navbar 链接。这是打开/关闭菜单的按钮。 href anchor 需要与您为空​​导航容器提供的任何 ID 相匹配

由于我无法对两个菜单使用完全相同的 UL，因此我决定使用 jQuery 以编程方式复制 Bootstrap 导航栏在页面加载时使用的 UL，并将其填充到空导航容器中以供 mmenu 使用。

以编程方式创建空的导航容器可能会更干净。我明天可能会这样做。

此 javascript 复制 UL，将其放入导航容器中，并使用复制的 UL 实例化 mmenu:

$(function () {
    $("#mainSiteMenuMMenuNav").append($("#mainSiteMenu").clone().attr("id", "mainSiteMenuMMenu").attr("class", ""));
    $("#mainSiteMenuMMenuNav").mmenu({
        configuration: {
            pageNodetype: "div"
        }
    });
});

应该可以了。如果遇到问题，请仔细检查所有内容。再说一次，我几个小时前才想出这个……所以这可能不是一个万无一失的解决方案。

如果有人有更好的方法或发现问题，请告诉我。