Feature request: Optional "hover" on large screens

[ajplopez]

Brace yourself for a controversial feature request :D

I have customers who do like the clicky menu but to make them feel safe they would also like the menu to hover when on desktop screens (using a mouse).

I can easily update my CSS so that, in addition to the click functionality, the menu can be hovered over. However, if a menu was already clicked on and the dropdown is showing, when the user hovers, the open one doesn't close itself. This is especially problematic when dealing with mega menus because they usually span the width of navigations.

I'm not sure the best way to handle this, but I wish there was a way that if a user hovers over another top level clicky toggle in the menu, it would close any other menus that are open.

[ajplopez]

Thinking out loud: Perhaps an alternative would just be to have an option to disable the clicky functionality for certain breakpoints. That way I could have mobile and touch devices work with clicky, but also have CSS hovering for large screens.

[mrwweb]

@ajplopez Thanks for writing up this request and your previous feedback on the script. I really do appreciate it all.

I "braced myself" and thought over it a bit before responding. Conclusion: This is not a feature I'm going to add.

This script directly came out of my article "In Praise of the Unambiguous Click Menu", and that article is the best explanation for why I won't be adding this. Maybe that article can be helpful in educating your clients? (It has helped with some of mine.)

I simply don't think hover-triggered dropdowns are a good idea, and adding them to this script would introduce a ton of complexity that I do not want to support. It's headspinning, for instance, to think about how a sort of combination hover/click/keyboard menu should support ARIA and remain accessible.

Adding a bunch of complexity for something I don't believe in is not a road I'm willing to go down.

This project has an open source license, so you can absolutely take this and run with it to do something else. I'd happily even add a link to help people find it if this isn't what they're looking for. That said, I suspect you'd be better off building something different from scratch, rather than trying to shoehorn hover support onto this script that was built very explicitly without support for hovering.

Thanks again for the friendly request.

[ajplopez]

Thanks for your thoughtful response. I agree - it's not something that I really want to do but sometimes client just insist on doing things like this. I always try to educate them as much as possible and hopefully they'll change their minds eventually.

For what it's worth, I did get this working by using your method of "closing submenus with js" and it seems to work great.

document.addEventListener("DOMContentLoaded", () => {
  const myMenu = document.querySelector("ul.clicky-menu");
  const topLevelItems = document.querySelectorAll(
    "ul.clicky-menu > li.top-level",
  );

  topLevelItems.forEach((item) => {
    item.addEventListener("mouseenter", () => {
      if (window.innerWidth >= 1280) {
        myMenu.dispatchEvent(new Event("clickyMenusClose"));
      }
    });
  });
});

[mrwweb]

Thanks for sharing that code! I'm glad you were able to get that working. It's cool to see the new custom event being so useful across different use-cases!