Support » Plugin: Max Mega Menu » Maxmenu JS API – hidePanel() closes mobile menu

  • Resolved cyclissmo

    (@cyclissmo)


    I’ve added some javascript to inject a ‘close submenu’ button on all menu items for mobile. Those buttons have handlers that fire hidePanel().

    Click works perfect. However, any keypress event hides the submenu *and* dismisses the whole mobile menu. Am I doing something wrong?

    
    $(document).ready(function() {
        // mobile only
        if (Modernizr.mq('(max-width: 1129px)')) {
          // get all menu bar top-level links
          var $lis = $('#mega-menu-primary').children('li.mega-menu-item-has-children');
          // this is the 'close submenu' button for accessibility
          var $closer = $('<a role="button" aria-label="close submenu" href="#" tabindex="0" class="close_submenu"><span aria-hidden="true">X</span></a>');
    
          $lis.each(function() {
            var $li = $(this);
            var $a = $closer.clone();
            // inject the 'close submenu' button
            $li.children('ul.mega-sub-menu').children('li').first().prepend($a);
            $a.off().on('click keydown', function(e) {
              if (e.type === 'click' || e.which == 13) {
                e.preventDefault();
                e.stopPropagation(); // <- this doesn't help
                var $submenu = $li.children('a.mega-menu-link');
                // on click event, this works perfectly.
                // on keydown:enter event, this hides the submenu AND dismisses the mobile menu, not what I want :(
                $('#mega-menu-primary').data('maxmegamenu').hidePanel($submenu, true);
              }
            });
          });
        }
      });
    
    • This topic was modified 1 month, 4 weeks ago by cyclissmo.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi cyclissmo,

    In the maxmegamenu.js file, can you add some debug before each call to plugin.hideMobileMenu() and let me know which one is being triggered?

    Regards,
    Tom

    Thread Starter cyclissmo

    (@cyclissmo)

    It looks like this segment of code is causing the mobile menu to close, starting on line 435:

    
    $menu.parent().on("focusout.megamenu", function(e) {
                    if ( $menu.parent().hasClass("mega-keyboard-navigation") ) {
                        setTimeout(function() {
                            var menu_has_focus = $menu.parent().find(":focus").length > 0;
                            if (! menu_has_focus) {
                                $menu.parent().removeClass("mega-keyboard-navigation");
                                plugin.hideAllPanels();
                                console.debug(arguments.callee); // <- debug
                                plugin.hideMobileMenu();
                            }
                        }, 10);
                    }
                });
    
    • This reply was modified 1 month, 3 weeks ago by cyclissmo.
    Plugin Author megamenu

    (@megamenu)

    Hi clclissmo,

    That block of code should only be entered if you have “activated” keyboard navigation, by using the tab key first.

    If you go to megamenu.com, collapse down to mobile width, open the header menu and expand the “Documentation” sub menu, then paste this into the console:

    var panelToHide = jQuery("#mega-menu-item-24389 > a.mega-menu-link");
            jQuery('#mega-menu-primary_navigation').data('maxmegamenu').hidePanel(panelToHide, true);

    … you should find that the sub menu closes but the mobile menu itself (correctly) stays visible.

    I would try modifying the code above to work with your menu first, then work on from there.

    Regards,
    Tom

    Thread Starter cyclissmo

    (@cyclissmo)

    With your help I figured it out. Setting focus to the menu link prior to calling hidePanel() stops the mobile menu from dismissing:

    $(document).ready(function() {
      // mobile only
      if (Modernizr.mq('(max-width: 1129px)')) {
        // get all menu bar top-level links
        var $lis = $('#mega-menu-primary').children('li.mega-menu-item-has-children');
        // this is the 'close submenu' button for accessibility
        var $closer = $('<a role="button" aria-label="close submenu" href="#" class="close_submenu"><span aria-hidden="true">X</span></a>');
        $lis.each(function() {
          var $li = $(this);
          var $a = $closer.clone();
          // inject the 'close submenu' button
          $li.children('ul.mega-sub-menu').children('li').first().prepend($a);
          $a.on('click keydown', function(e) {
            if (e.type === 'click' || e.which == 13) {
              e.preventDefault();
              // the next line prevents the menu from dismissing
              $li.children('a.mega-menu-link').focus();
              var $submenu = $li.children('a.mega-menu-link');
              $('#mega-menu-primary').data('maxmegamenu').hidePanel($submenu, true);
            }
          });
        });
      }
    });
    • This reply was modified 1 month, 3 weeks ago by cyclissmo.
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.