在Bootstrap中集成Mmenu [英] Integrating Mmenu within Bootstrap

问题描述

我想将 Jquery Mmenu 集成到Bootstrap中，以通过响应式设计自动使引导程序切换到该滑动的左侧菜单，而不是显示本机的顶部垂直响应式菜单.

I'd like to integrate Jquery Mmenu within Bootstrap to automaticaly let bootstrap switchs to this sliding left-side menu with the responsive design, rather than displaying the native top vertical responsive menu.

有什么想法或方法吗?

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

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

我先谢谢大家.

周杰伦.

推荐答案

好吧，几个小时前我开始进行相同的任务，希望在这里找到答案以帮助我.

Well, I set out on same quest a few hours ago and I was hoping to find an answer here to help me out.

我现在开始工作了，尽管我是新手，但我将分享我学到的知识.如果您看到菜鸟的错误，其他人会随意报错.猜猜是时候偿还社区了，因为我在这里回答了很多问题.

I've got it working now and I'll share what I've learned, though I'm new to bootstrap. Someone else feel free to chime in if you see rookie mistakes. Guess it's time to repay the community since many of my questions have been answered here.

在这里:

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

Look at this jsFiddle to see my complete sample code and demo: http://jsfiddle.net/acterry/fMYpg/

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

You'll have play with the the vertical divider to see the nav change from one style to the other.

我想使用相同的导航键来驱动两个菜单.但是在浏览了Jquery.mmenu的源代码之后，我看到了我知道会导致问题的以下内容:

I wanted to use the same nav ul to drive both menus. But after looking through the source of Jquery.mmenu, I saw the following things that I knew would cause problems:

• mmenu将新容器(默认情况下为div)包裹在HTML周围
• mmenu修改菜单ul的方式可能会吓坏引导导航栏
• mmenu无法自行销毁并撤消它引起的DOM更改

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

As a proof of concept, I was fine with using bootstraps predefined responsive breakpoints to determine which nav style was shown.

这是菜单部分的HTML

Here's the HTML for the menu portion

<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>

以下是这些步骤的快速细分:

Here's a quick breakdown of the steps:

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

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

Since I couldn't use the exact same UL for both menu's, I decided to use jQuery to programmatically duplicate the one used by the bootstrap navbar upon page load and stuff it into the empty nav container for mmenu to use.

仅以编程方式创建空的nav容器可能会更清洁.我明天可能会做.

It would probably be cleaner to just create the empty nav container programmatically. I'll probably do that tomorrow.

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

This javascript copies the UL, places it into the nav container and instantiates mmenu with the copied UL:

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

应该这样做.如果遇到问题，请仔细检查所有内容.再说一次，我只是在几个小时前就弄清楚了....所以它可能不是一个万无一失的解决方案.

That should do it. If you run into problems, please double-check everything. And again, I just figured this out a couple of hours ago .... so it might NOT be a fool proof solution.

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

If someone has a better way or sees issues, let me know.

这篇关于在Bootstrap中集成Mmenu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！