我正在试用 mmenu 插件 ( http://mmenu.frebsite.nl/ )，对此我感到非常兴奋。我让它适用于我的响应式网站......唯一的问题是，当我从 mmenu 工作的宽度变为桌面视图（比如 768px 到 1024px 或更大）时，我需要 mmenu 消失，删除本身等
因为 mmenu 插件将我的导航列表从 HTML 中的原始位置拉出，所以我需要将它重新放回原处并显示自己......在文档中没有看到任何关于此的内容。如果我错过了或者你有想法，请告诉我！
谢谢。
问问题
4448 次
5 回答
3
与其克隆菜单，我认为更好的选择是在屏幕低于一定大小时启动 jQuery 函数。
$(window).resize(function() {
if ($(window).width() < 768) {
$(function() {
$(' nav#menu').mmenu();
});
}
else {
do some thing else
}
});
于 2014-07-31T15:40:06.900 回答
0
我通过在浏览器尺寸减小时克隆菜单（使用 Harve：http: //harvesthq.github.io/harvey/）解决了这个问题，此时仅使用 mmenu 激活它。当我重新调整大小时，我删除了克隆的移动版菜单，然后再次显示桌面菜单。我面临的一个问题是，如果您在移动菜单展开的情况下将大小调整回桌面，它不会自动关闭。我通过在删除移动版本之前添加一个触发事件来关闭它来解决这个问题。
标记：
<ul id="menu">
<li class="menu-item">
<a href="">Home</a>
</li>
.....
</ul>
查询：
$( 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
}
});
});
于 2014-04-11T19:50:42.047 回答
0
于 2015-06-16T20:54:29.287 回答
0
将其发布在您的 CSS 中
@media screen and (min-width:1000px) {
#menu {
display:none
}
}
于 2015-06-28T20:06:37.740 回答