Mmenu在Bootstrap中的集成

Question

我希望将Jquery 集成到Bootstrap中，以便自动将引导切换到这个滑动的左侧菜单和响应设计，而不是显示本机顶部垂直响应菜单。

有什么想法或方法吗？

Jquery：http://mmenu.frebsite.nl

我预先感谢大家。

杰伊。

Answer 1

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

我已经让它工作了，我将分享我所学到的，虽然我是新手。如果你看到菜鸟的错误，其他人可以随意插话。我想是时候回报社区了，因为我的许多问题都在这里得到了回答。

下面是：

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

您必须使用垂直分隔器来查看导航从一种风格到另一种风格的变化。

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

• mmenu将新容器(默认情况下为div)封装在HTML中。
• mmenu修改菜单ul的方式可能会使引导导航条异常。
• mmenu没有任何功能来破坏自身并撤消它所导致的DOM更改。

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

这是菜单部分的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一个ID以便我们可以在以后引用它。
3. 复制导航条-内部div
4. 在第一个导航栏内部，将可视桌面添加到div的类参数中--这是将显示给桌面用户的导航条。引导程序将隐藏在桌面/tablet宽度断点下面。
5. 在第二个导航栏内，将隐藏桌面添加到div的类参数--这是将显示在平板/电话(或默认情况下浏览器宽度小于940 to的其他任何东西)上的导航条。
6. 在navbar的结束div之后添加一个带有ID (我使用了mainSiteMenuNav)的空导航容器。这就是mmenu的UL的位置。
7. 在我的代码中，请注意第二个导航栏内部的btn-navbar链接。这就是要打开/关闭菜单的按钮。href锚需要匹配您给空导航容器的任何信息。

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

如果只是以编程方式创建空nav容器，可能会更干净。我明天可能会这么做。

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

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

这样就行了。如果你遇到问题，请再检查一遍。再说一次，我几个小时前才发现的.所以这可能不是一个愚蠢的解决方案。

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

Answer 2

希望这是关于主题和帮助。我一直使用普通的引导菜单，直到最小宽度:1060 on，然后是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();

}

});

Answer 3

我添加了另一个示例，强制引导导航条在向下滚动时保持在窗口的顶部。

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

我将pageNodetype改为“节”，以更改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;
    }
}