jquery - 在 Bootstrap 中集成 Mmenu

Question

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

有什么想法或方法吗？

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

我提前感谢大家。

杰。

score 5 · Accepted Answer

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

我现在已经开始工作了，我会分享我学到的东西，虽然我是新手。如果您看到新手错误，其他人可以随意插话。猜猜是时候回报社区了，因为我的许多问题都在这里得到了解答。

开始：

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

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

我想使用相同的导航来驱动两个菜单。但是在查看了Jquery.mmenu的源码之后，我看到了以下我知道会导致问题的东西：

mmenu 在您的 HTML 周围包装新容器（默认为 div）
mmenu 以可能会吓坏引导导航栏的方式修改菜单 ul
mmenu 没有破坏自身和撤消它引起的 DOM 更改的功能

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

这是菜单部分的 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>

以下是步骤的快速细分：

（上面未显示）如果页面上的所有 HTML 尚未在单个容器中，则将其包装在 div 中。如果您使用的不是 div，请在 mmenu 配置中适当设置 pageNodetype
定义您的导航，如引导组件页面上所示。但是，给 UL 一个 ID，以便我们以后可以引用它。
复制导航栏内部 div
在第一个导航栏内部，将 visible-desktop 添加到 div 的类参数——这是将显示给桌面用户的导航栏。Bootstrap 会将其隐藏在桌面/平板电脑宽度断点下方
在第二个 navbar-inner 中，将 hidden-desktop 添加到 div 的类参数中——这是将显示给平板电脑/手机（或默认情况下浏览器宽度小于 940 像素的任何其他东西）的导航栏
在导航栏的关闭 div 之后添加一个带有 ID 的空导航容器（我使用了 mainSiteMenuNav）。这就是用于 mmenu 的 UL。
在我的代码中，请注意第二个 navbar-inner 中的 btn-navbar 链接。这是打开/关闭菜单的按钮。href 锚点需要匹配您为该空导航容器提供的任何 ID

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

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

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

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

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

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

score 1 · Accepted Answer

希望这是主题和有用的。我一直使用正常的引导菜单，直到 min-width: 1060px 然后 MMenu 从那时起。这是 JS（我使用 enquire.js 来匹配媒体查询）。

// uses enquire.js to fire js on media queries
// https://github.com/WickyNilliams/enquire.js/
enquire.register("screen and (max-width:1060px)", {

// Wait until media query is matched
deferSetup: true,
// Fires once 
setup: function() {
// requires an empty <nav id="menu"></nav>
$('.navbar-nav').clone().appendTo('#menu');
$('#menu > ul').attr("id", "mmenu");
//clean up mmenu by removing bootstrap classes
$('#mmenu ul').removeClass('dropdown-menu animated fadeInDown');
$('#mmenu li').removeClass('dropdown');
$('#mmenu li a').removeClass('dropdown-toggle').removeAttr("data-toggle data-target");
// $('#mmenu li a').removeAttr("data-toggle data-target");
$('#mmenu').removeClass('nav navbar-nav');

},

// If supplied, triggered when a media query matches.
match: function() {

//Show mmenu on media query match
$("#menu").mmenu({
"offCanvas": {
"position": "right"
}
});
},

// *from a matched state to an unmatched state*.
unmatch: function() {
//Hide mmenu
$('#menu').trigger('close.mm');
// $('#mmenu').remove();

}

});

score 0 · Accepted Answer

由于这仍然是开放的，任何有相同问题并正在寻找有效实现的人：检查一下。

我只是在我的项目中使用它，它再简单不过了......

score 0 · Accepted Answer

我添加了一个额外的示例，强制引导导航栏在向下滚动时停留在窗口顶部。

http://jsfiddle.net/acterry/yC7R3/

我将 pageNodetype 更改为“section”以更改 mmenu 进行修改的位置。

也添加了这个 CSS

/* Push down the sidebar menu so that first item is not covered up by sticky navbar */
#mainSiteMenuMMenuNav.mmenu-opened {
    top: 50px;
}

/* force the top navbar to stick to top of window when you scroll down*/
@media (max-width: 979px) {
    /* Enable use of floated navbar text */
    .navbar-text.pull-right {
        float: none;
        padding-left: 5px;
        padding-right: 5px;
    }
    .navbar-fixed-top, .navbar-fixed-bottom {
        position: fixed;
        margin-left: 0px;
        margin-right: 0px;
    }
}

score 0 · Accepted Answer

如果您使用的是 Blogger 平台，您可以使用我在https://shareusyourday.blogspot.com/2020/09/mmenu-bootstrap-wrapper.html中找到的方法

您需要拥有 4 个主要部分

包含您的标签的内容。- 创建画布菜单。
Mmenu CDN 文件-，链接 href='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.5.14/mmenu.min.css' rel='stylesheet'/>
菜单 JavaScript
引导菜单 HTML 标记（您可以在帖子中找到上述示例）

再见

jquery - 在 Bootstrap 中集成 Mmenu

5 回答 5

Related

Reference