在Bootstrap中集成Mmenu

Question

我想将Jquery Mmenu集成到Bootstrap中,以自动让bootstrap切换到这个具有响应式设计的滑动左侧菜单,而不是显示本机顶部垂直响应菜单.

任何想法或方法？

Jquery Mmenu:http://mmenu.frebsite.nl

我提前感谢你们.

周杰伦.

Answer 1

好吧,我几个小时前开始了同样的任务,我希望能在这里找到答案来帮助我.

我现在已经开始工作,我将分享我所学到的知识,尽管我是新手.如果你看到菜鸟的错误,别人可以随意插话.猜猜是时候回报社区了,因为我的许多问题已在这里得到解答.

开始:

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

您可以使用垂直分隔线来查看导航从一种样式更改为另一种样式.

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

• mmenu围绕HTML包装新容器(默认为div)
• mmenu以可能导致引导导航栏的方式修改菜单ul
• mmenu没有破坏自身的功能并撤消它引起的DOM更改

作为一个概念证明,我使用bootstraps预定义的响应断点来确定显示哪种导航样式.

这是菜单部分的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. 定义您的nav ul,如引导程序组件页面上所示.但是,给UL一个ID,以便我们以后可以参考.
3. 复制navbar-inner div
4. 在第一个navbar内部,将visible-desktop添加到div的class参数中 - 这是将向桌面用户显示的导航栏.Bootstrap会将其隐藏在桌面/平板电脑宽度断点下方
5. 在第二个navbar-inner中,将hidden-desktop添加到div的类参数中 - 这是将显示给平板电脑/手机的导航栏(或默认情况下浏览器宽度小于940px的任何其他内容)
6. 在导航栏的结束div之后添加一个带有ID的空导航容器(我使用了mainSiteMenuNav).这是mmenu的UL.
7. 在我的代码中,注意第二个navbar-inner中的btn-navbar链接.这是打开/关闭mmenu的按钮.href锚点需要匹配您为空导航容器提供的任何ID

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

以编程方式创建空导航容器可能更简洁.我明天可能会这样做.

这个javascript复制UL,将其放入导航容器并使用复制的UL实例化mmenu:

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

应该这样做.如果您遇到问题,请仔细检查一切.再说一次,我刚刚在几个小时前就想到了......所以它可能不是一个万无一失的解决方案.

如果某人有更好的方式或看到问题,请告诉我.