在Bootstrap中集成Mmenu
我想将Jquery Mmenu集成到Bootstrap中，以自动让bootstrap切换到这个具有响应式设计的滑动左侧菜单，而不是显示本机顶部垂直响应菜单。
任何想法或方法？
Jquery Mmenu： http ：//mmenu.frebsite.nl
我提前感谢你们。
周杰伦。
好吧，我几个小时前就开始了同样的任务，我希望能在这里找到答案来帮助我。
我现在已经开始工作了，我将分享我所学到的知识，尽管我是初学者。 如果你看到菜鸟的错误，别人可以随意插话。 猜猜是时候回报社区了，因为我的许多问题都在这里得到了回答。
开始：
看看这个jsFiddle，看看我的完整示例代码和演示： http ： //jsfiddle.net/acterry/fMYpg/
您可以使用垂直分隔线来查看导航从一种样式更改为另一种样式。
我想使用相同的nav ul驱动两个菜单。 但在浏览了Jquery.mmenu的源代码之后，我看到以下我知道会引起问题的事情：
- mmenu围绕HTML包装新容器（默认为div）
- mmenu以可能导致引导导航栏的方式修改菜单ul
- mmenu没有破坏自身的function并撤消它引起的DOM更改
作为概念certificate，我使用bootstraps预定义的响应断点来确定显示哪种导航样式。
这是菜单部分的HTML
以下是步骤的快速细分：
- （如上所示）如果页面上的所有HTML都不在单个容器中，请将其包装在div中。 如果您使用的不是div，请在mmenu配置中正确设置pageNodetype
- 定义您的nav ul，如bootstrap组件页面所示。 但是，给UL一个ID，以便我们以后可以参考。
- 复制navbar-inner div
- 在第一个navbar内部，将visible-desktop添加到div的class参数中 – 这是将向桌面用户显示的导航栏。 Bootstrap会将其隐藏在桌面/平板电脑宽度断点下方
- 在第二个navbar-inner中，将hidden-desktop添加到div的类参数中 – 这是将显示给平板电脑/手机的导航栏（或默认情况下浏览器宽度小于940px的任何其他内容）
- 在导航栏的结束div之后添加一个带有ID的空导航容器（我使用了mainSiteMenuNav）。 这是mmenu的UL。
- 在我的代码中，注意第二个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" } }); });
应该这样做。 如果您遇到问题，请仔细检查一切。 再说一次，我刚刚在几个小时前就想到了……所以它可能不是一个万无一失的解决方案。
如果有人有更好的方法或看到问题，请告诉我。
希望这是主题和有用的。 我使用了正常的bootstrap菜单，直到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 $('.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(); } });
我添加了一个额外的示例，在向下滚动时强制引导导航栏停留在窗口的顶部。
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; } }
由于这仍然是任何有相同问题并且正在寻找有效工作的人： 请查看此信息 。
我刚刚在我的项目中使用过它并不容易……