Maxmenu JS API – hidePanel() closes mobile menu

  • Resolved cyclissmo

    (@cyclissmo)


    3 years, 3 months ago

    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 3 years, 3 months 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 3 years, 3 months 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 3 years, 2 months ago by cyclissmo.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Maxmenu JS API – hidePanel() closes mobile menu’ is closed to new replies.

Tags