我正在试用 mmenu 插件 (http://mmenu.frebsite.nl/)，对此我感到非常兴奋。我让它适用于我的响应式站点...唯一的问题是，当我从 mmenu 工作的宽度变为桌面视图（比如 768px 到 1024px 或更大）时，我需要 mmenu 消失，删除本身等等。
由于 mmenu 插件将我的导航列表从 HTML 中的原始位置拉出，我需要将其重新放回并显示自己...在文档中没有看到任何关于此的内容。如果我错过了或者你有想法，请告诉我！
谢谢。
【问题讨论】：
标签： mobile menu responsive-design desktop mmenu
比起克隆菜单，我认为更好的选择是在屏幕低于特定尺寸时启动 jQuery 函数。
$(window).resize(function() {
if ($(window).width() < 768) {
$(function() {
$(' nav#menu').mmenu();
});
}
else {
do some thing else
}
});
【讨论】：
我通过在浏览器尺寸减小时克隆菜单（使用 Harvey：http://harvesthq.github.io/harvey/）解决了这个问题，此时仅使用 mmenu 激活它。当我重新调整大小时，我删除了克隆的移动版菜单，然后再次显示桌面菜单。我面临的一个问题是，如果您在移动菜单展开的情况下将大小调整回桌面，它不会自动关闭。我通过在删除移动版本之前添加触发事件将其关闭来解决此问题。
标记：
<ul id="menu">
<li class="menu-item">
<a href="">Home</a>
</li>
.....
</ul>
jquery：
$( document ).ready(function() {
/* Add and remove the mobile version of the menu */
var toggleMenu = {
elem: $("#menu"),
mobile: function(){
//clone the existing top menu and append it to the mobile menu
var menu = this.elem.clone(true).addClass("mobile-added").appendTo("#mobile-menu");
//activate mmenu
$("#mobile-menu").mmenu({
position: "right",
zposition: "back",
});
//hide desktop top menu
this.elem.hide();
},
desktop: function(){
//close the menu
$("#mobile-menu").trigger("close.mm");
//remove cloned menu
$('.mobile-added').remove();
//reshow desktop menu
this.elem.show();
}
};
Harvey.attach('screen and (max-width:1024px)', {
setup: function(){ // called when the query becomes valid for the first time
},
on: function(){ // called each time the query is activated
toggleMenu.mobile();
},
off: function(){ // called each time the query is deactivated
}
});
Harvey.attach('screen and (min-width:1025px)', {
setup: function(){ // called when the query becomes valid for the first time
},
on: function(){ // called each time the query is activated
toggleMenu.desktop();
},
off: function(){// called each time the query is deactivated
}
});
});
【讨论】：
【讨论】：
在你的 CSS 中发布
@media screen and (min-width:1000px) {
#menu {
display:none
}
}
【讨论】：