使用mmenu插件--如何删除桌面？

Question

我正在试用mmenu插件(http://mmenu.frebsite.nl/)，我对此感到非常兴奋。我让它在我的响应式网站上工作...唯一的问题是，当我从一个宽度的mmenu工作到一个桌面视图(比如768px到1024px或更大)时，我需要mmenu消失，移除它自己，等等。

因为mmenu插件将我的导航列表从HTML中的原始位置拉出，所以我需要它再次被放回原处并显示出来……在文档里没看到任何关于这个的东西。如果我错过了或者你有想法，请让我知道！

谢谢。

Answer 1

$(window).resize(function() {
if ($(window).width() < 768) {
  $(function() {
    $(' nav#menu').mmenu();
  });
}
else {
do some thing else
}
});

Answer 2

我已经解决了这个问题，在浏览器尺寸减小时克隆菜单(使用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
        }
    });

});

Answer 3

您必须克隆菜单并进行媒体查询。

http://mmenu.frebsite.nl/support/tips-and-tricks.html

你可以在这里找到解释。