Using mmenu plugin -- how to remove for desktop?

Question

I am trying out the mmenu plugin (http://mmenu.frebsite.nl/) and am super excited about it. I have it working for my responsive site... The only problem is that, when I go from a width with the mmenu working to a desktop view (like say 768px to 1024px or bigger), I need the mmenu to go away, remove itself, etc.

Because the mmenu plugin pulls my nav list out of its original spot in the HTML, I need it to get put back again and show itself... Not seeing anything about this in the docs. If I missed it or you have ideas, let me know!

Thanks.

Have a look at issue 27 on the github page: https://github.com/BeSite/jQuery.mmenu/issues/27 Basically, it's recommended to clone the menu. — Fred, Jan 22 '14 at 12:53

score 3 · Answer 1 · answered Jul 31 '14 at 15:40

Rather than clone the menu I think a better option would be to initiate the jQuery function when the screen is below a certain size.

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

score 0 · Answer 2 · answered Apr 11 '14 at 19:50

I have solved this by cloning the menu when the browser size is reduced (using Harvey: http://harvesthq.github.io/harvey/) and only activating it with mmenu at this point. When I resize back up, I delete the cloned mobile version of the menu, and then show the desktop menu again. One problem I faced was that if you resize back up to desktop with the mobile menu expanded, it didn't automatically close. I fixed this by adding a trigger event to close it before removing the mobile version.

Markup:

<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
        }
    });

});

Could you post a simple example of this in action? Thanks so much for the info and help! — Aaron, Nov 13 '14 at 15:47
Sorry its taken a while to reply. I don't have a simple example other than the code posted above but if it is useful this is the site I used it on: http://www.mariprist.com/en/ — Brighty, Dec 03 '14 at 21:37

score 0 · Answer 3 · answered Jun 16 '15 at 20:54

0

You have to clone the menu and making a media query.

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

Here you can find the explanation.

answered Jun 16 '15 at 20:54

Gabriel Castillo Prada

4,114
4
21
31

score 0 · Answer 4 · edited Jun 29 '15 at 08:43

0

Post that in your CSS

    @media screen and (min-width:1000px) {
      #menu {
         display:none
       }
    }

edited Jun 29 '15 at 08:43

potame

7,597
4
26
33

answered Jun 28 '15 at 20:06

djenne

1

score 0 · Answer 5 · answered Sep 03 '15 at 07:03

0

Hi may be setting the options will help you.

The options page is here and a working example is here and here

answered Sep 03 '15 at 07:03

Ananda

888
9
19

Using mmenu plugin -- how to remove for desktop?

5 Answers5