Jquery mmenu - Reset menu to main level on close

Question

I currently have mmenu as my mobile menu. I need to be able to reset my menu to the first level upon close. As of now the default functionality leaves me where I left off while navigating deeper into the sub-level after closing the menu and re-opening it.

I'd greatly appreciate help with this matter.

Thank you!!

Answer 1

I was able to solve this by adding a javascript function to my menu, which enables it to navigate to the home level (#mm-1). It also allows you to open any panel by passing the relative link as a parameter. Please take a look at the following code:

HTML

        <div class="mh-head navbar-fixed-top">
        <span class="mh-btns-left"><a class="fa fa-bars" 
        onclick="openSubmenu('#mm-1')"></a></span>
        </div>

Javascript

        function openSubmenu(submenu) {
            instantiateComponents(submenu);
            openDesiredSubmenu();
        }

        function instantiateComponents(submenu) {
            instantiateCurrentMenu();
            instantiateApi();
            instantiateDesiredSubmenu(submenu);
        }

        function instantiateCurrentMenu() {
            currentMenu = $('#menu');
            currentMenu.mmenu({});
        }

        function instantiateApi() {
            menuApi = currentMenu.data('mmenu');
        }

        function instantiateDesiredSubmenu(submenu) {
            desiredSubmenu = currentMenu.find(submenu);
        }

        function openDesiredSubmenu() {
            menuApi.openPanel(desiredSubmenu.closest('.mm-panel')); 
            menuApi.open();
        }

Hope this is helpful.

Answer 2

Try this on any menu click:

$(".mm-subclose").trigger('click');

Trigger() is a JQuery function. When we click on back arrow on the top of submenu. Submenus get hidden. So when we use ".mm-subclose" the class of back arrow, Menu get reset to main level.

Answer 3

You could try to hack lib itself.

For instance:

a. find this code (ca. #374):

this.__transitionend(a.$page.first(), function () {

b. right after code above, you could insert something like this:

var jid = t.$menu.attr('id');
$('#' + jid + ' .mm-panels').fadeOut('fast', function(){
    $(this).children().removeClass('mm-opened mm-subopened mm-hidden mm-current mm-highest');
    $('#' + jid + ' .mm-panels :first-child').addClass('mm-opened mm-current');
}).fadeIn('fast');

explanation:

Original mm code (one you are looking for) fires on panel being closed, regardless on how, or why it is being closed.

Code you just pasted, re-arranges classes used by mmenu engine to change mmenu states.

To make all transitions to happen more smoothly, visible section of panel (e.g. if you use iconbar extension) fades out, and after re-positioning of menu panels main iconbar is fading in.

Answer 4

Fred's answer works on a previous version of Mmenu but if you're using the latest version (latest at the time this was posted was 5.6.1), you can use the API methods like the following:

var api = $("#menu").data( "mmenu" );
api.bind( "closed", function() {
    api.closeAllPanels();
});

Answer 5

You could use the "closed" callback event to close all opened panels.

The trick to doing this -when you're using horizontal submenus (the default setting)- is to open the first panel (the "main" level menu).

$("#menu").mmenu();
$("#menu").on( "closed", function() {
    $("#menu .mm-panel").first().trigger( "open.mm" );
});