我想在Bootstrap中集成 Jquery Mmenu ，自动让bootstrap通过响应式设计切换到这个滑动的左侧菜单，而不是显示本机顶部垂直响应式菜单。
任何想法或方法？
Jquery Mmenu：http://mmenu.frebsite.nl
我提前感谢你们。
杰
答案 0 :(得分：5)
好吧，几个小时前我开始了同样的任务，我希望能在这里找到答案来帮助我。
我现在已经开始工作，我将分享我所学到的知识，尽管我是新手。如果你看到菜鸟的错误，别人可以随意插话。猜猜是时候回报社区了，因为我的许多问题已在这里得到解答。
这里是：
看看这个jsFiddle，看看我的完整示例代码和演示：http://jsfiddle.net/acterry/fMYpg/
您可以使用垂直分隔线来查看导航从一种样式更改为另一种样式。
我想使用相同的nav ul驱动两个菜单。但在浏览了Jquery.mmenu的源代码之后，我看到以下我知道会引起问题的事情：
作为概念验证，我使用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>
以下是步骤的快速细分：
由于我无法在两个菜单中使用完全相同的UL，因此我决定使用jQuery以编程方式复制页面加载时引导程序导航栏使用的那个，并将其填充到空导航容器中以供mmenu使用。
以编程方式创建空导航容器可能更简洁。我明天可能会这样做。
此javascript复制UL，将其放入导航容器并使用复制的UL实例化mmenu：
$(function () {
$("#mainSiteMenuMMenuNav").append($("#mainSiteMenu").clone().attr("id", "mainSiteMenuMMenu").attr("class", ""));
$("#mainSiteMenuMMenuNav").mmenu({
configuration: {
pageNodetype: "div"
}
});
});
应该这样做。如果您遇到问题，请仔细检查一切。再说一次，我刚刚在几个小时前就想到了......所以它可能不是一个万无一失的解决方案。
如果有人有更好的方法或看到问题，请告诉我。
答案 1 :(得分：1)
希望这是主题和有用的。我使用了正常的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 <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();
}
});
答案 2 :(得分：0)
我添加了一个额外的示例，在向下滚动时强制引导导航栏停留在窗口顶部。
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;
}
}
答案 3 :(得分：0)
由于任何遇到相同问题且正在寻找有效工作的人仍然可以开放：Check this out。
我刚刚在我的项目中使用过它并不容易......
答案 4 :(得分：0)
如果您使用的是Blogger平台，则可以使用我在https://shareusyourday.blogspot.com/2020/09/mmenu-bootstrap-wrapper.html中找到的方法
您需要具备4个主要部分
Adios