Core/Navigation with multiple sub menus

  • I am using the core/navigation block to set up a navigation that has multiple levels of sub menus.

    This is fine, however I want the menus to open on click, rather than hover. To achieve this I select ‘open on click’ from options in the editor. Perfect!

    Now on the front end, as expected the submenu opens fine on click, and then the next level sub menu opens fine on click. Now if I want to open up another submenu from the second level, I go to click it but the whole menu closes. This is because the “aria-expanded” label gets changed to “false” on all level of submenus when I click twice within the submenu, or try and change the focus to a different link.

    I expect the first submenu to stay open, as I open and close the next level of links within it. Then if I clicked out of the entire nav, all submenus will close.

    How can I change the how this functions?

    I realise that may have got confusing so here is a screen recording of the issue – https://capture.dropbox.com/aI0dfUVZfYFsWzhv

    Thanks

    Ash

    The page I need help with: [log in to see the link]

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

  • It sounds like you want to modify the behavior of the WordPress navigation block so that submenus remain open when clicking on links within them, rather than automatically closing when clicking elsewhere. Unfortunately, the WordPress navigation block doesn’t offer built-in options to customize this behavior directly.

    However, you can achieve the desired functionality with some custom JavaScript. Here’s an approach you can take:

    1. Disable Default Click Behavior: Prevent the default click behavior on submenu items so that they don’t automatically close the parent menu.
    2. Toggle Aria Attributes: Toggle the aria-expanded attribute manually when clicking on submenu items to control the visibility of submenus.

    Here’s a basic example of how you might implement this:

    document.addEventListener('DOMContentLoaded', function() {
    // Select all submenu items
    const subMenuItems = document.querySelectorAll('.wp-block-navigation ul.sub-menu a');

    // Loop through each submenu item
    subMenuItems.forEach(function(item) {
        // Add click event listener
        item.addEventListener('click', function(event) {
            // Prevent default click behavior
            event.preventDefault();

            // Toggle aria-expanded attribute
            const parentListItem = item.parentElement;
            const isExpanded = parentListItem.getAttribute('aria-expanded') === 'true';
            parentListItem.setAttribute('aria-expanded', !isExpanded);
        });
    });
});

    You would need to enqueue this JavaScript file in your WordPress theme or plugin. Additionally, you may need to adjust the selector .wp-block-navigation ul.sub-menu a to match the specific structure of your navigation menu.

    This JavaScript code listens for clicks on submenu items, prevents the default click behavior, and toggles the aria-expanded attribute of the parent submenu item. This way, submenus remain open when clicking on links within them until you click elsewhere or close the entire menu.

    Make sure to test this code thoroughly on your site, especially across different browsers and devices, to ensure it behaves as expected.

    Thread Starter bjmash

    (@bjmash)

    Thanks @muddassirnasim this was helpful. I am also experimenting with using CSS :focus-within to keep the main submenu expanded if the user is tabbing / clicking within the submenu container. On initial tests this seems to be working better then fighting with preventing the default click and applying my own.

    https://capture.dropbox.com/rJG4zlzXylwwht6o

    • This reply was modified 6 months, 1 week ago by bjmash. Reason: Added capture video showing focus-within experiment
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Core/Navigation with multiple sub menus’ is closed to new replies.

Tags