• Resolved massimusweb

    (@massimusweb)


    Hi,
    as I’m trying to improve accessibility of my website, I would like to be able to close
    the “mobile” nav menu by pressing the Escape key.
    I have searched other threads for this feature but I have only found a snippet for closing the menu when clicking outside:

    (function ($) {
                const $menu = $('.hfe-nav-menu');
    
                $(document).mouseup(e => {
                if (!$menu.is(e.target) // if the target of the click isn't the container...
                && $menu.has(e.target).length === 0) // ... nor a descendant of the container
                {
                    if($('.hfe-nav-menu__toggle').hasClass('hfe-active-menu') && $('.hfe-nav-menu nav').hasClass('menu-is-active')){
                        $('.hfe-nav-menu__toggle').trigger('click');
                    }
    
                    if($('.hfe-has-submenu-container').hasClass('sub-menu-active') && $('.hfe-has-submenu-container').parent().find('ul.sub-menu').hasClass('sub-menu-open')){
                        $('.hfe-menu-toggle').trigger('click');
                    }
                }
                });
           })(jQuery);
    
    document.querySelector(".hfe-nav-menu__toggle").addEventListener("click", function(){
          document.querySelector("body").classList.toggle("mobile-menu-open");
      });

    I need the same thing but also when pressing the Escape key, can you help me out?

    Many thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hello @massimusweb ,

    Thank you for your kind patience, and we are sorry for the delay in response here.

    Your query involves custom code that, unfortunately, something that we are not offering to support. I will keep this thread open and we’ll see if there’s someone in the community will share thoughts on the same.

    Thank you,
    Umar

    Thread Starter massimusweb

    (@massimusweb)

    Hello @bsfumar ,
    first of all thanks for the reply,
    I was asking this as a potential solution to a problematic behaviour of your Navigation Menu when the Hamburger icon is visible.
    Basically, when trying to navigate the website with the TAB key, focus gets stuck on the menu toggle, opening and closing it, preventing further navigation.
    Changing the menu closing icon to a custom one allows the focus to reach other elements but with no way to close the menu with a keyboard.

    Steps to reproduce the issue:

    1. Add a new header template in Elementor Header and Footer Builder
    2. Place the Navigation Menu widget and select a menu
    3. Preview the page
    4. Change width of the window to make the hamburger menu appear
    5. Try to navigate the page with the TAB key

    When the focus reaches the nav menu toggle you will only be able to open and close the menu, with no way to navigate the sub-menu nor the rest of the page.

    Hi @massimusweb ,

    Thank you for getting back with the detailed information and steps about the process you are following over there at your end. We need to take a closer look and test by login into your site to troubleshoot further things from our end. I will discuss this with our developer also if needed after that to get their input on the same.

    If you need help with this, don’t hesitate to open a new ticket. Kindly visit the following link and fill out the contact form with detailed information. Here is the link:
    https://wordpress.org/support/topic/read-this-first-31/

    Thank you,
    Umar

    Hello @massimusweb ,

    I am marking this topic as resolved due to inactivity and assuming the issue is resolved at your end.

    Feel free to reply or open up a new issue thread if you still face any problems.

    Kind regards,
    Umar

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Closing nav menu with Escape key’ is closed to new replies.