search

mrwweb / clicky-menus

Simple click-triggered navigation submenus. Accessible and progressively enhanced.
MIT License
90 stars 15 forks source link

Feature request / how to? Close button within the mega menu #17

Closed ajplopez closed 3 months ago

ajplopez commented 4 months ago

I'm working on a mega menu that has a "Close" button. I would like it so that the user can click on the Close button and it collapses the menu. For my purposes, the Close button markup is within the mega menu itself.

But I think because it's within the menu, clicking on the button still leaves the focus on the top level button so it doesn't close.

So it would be nice if there was a way to set an explicit close button within mega menus. Is this possible currently?

mrwweb commented 3 months ago

Good question. Right now, I don't think this is possible, but I'm actually mulling over a different-but-related issue that might make this possible soon. Hopefully I'll have an update soon.

mrwweb commented 3 months ago

@ajplopez I haven't actually built out your specific use-case, but it should be possible now with the v1.2.0 I pushed out today!

Here's the new feature you'll need.

The gist of what you'd need to do:

  1. Get the close buttons into the submenus however you can. If it were me, I'd insert them with JS as a progressive enhancement.
  2. Give those buttons an event listener that dispatches the event clickyMenusClose to the parent menu item when they are clicked.

As I write this out, I realize that you'll need to be careful about managing focus in this case. You presumably want to return it to the parent menu item of the open submenu, but I haven't provided any easy way to do that. (That is because I can't make a good assumption about where focus should always go since this function is intended for arbitrary use.)

If it were me I would capture button with aria-expanded="true" before dispatching the event and then setting .focus() on that button afterwards. Shouldn't be terrible.

Let me know how it goes! If you write something you can share, it would be great to post it to this issue!

mrwweb commented 3 months ago

I'm going to close this, but feel free to re-open if you try to do this and run into issues.

ajplopez commented 3 months ago

This is fantastic! I did get this working for my own set up.

I was a little bit confused by the myMenu because you're targeting the ul with the class "clicky-menu" and not the nav id = " primary-nav " but once I got that figured out it was working.

Also, I ended up with multiple mega menus each with their own close buttons so I just targeted any button with .close-open-menus buttons and that seems to work great.

It seems that once the Close menu button is clicked, the focus applies to the top level button again so that seems to work great for my setup.

Thanks again!

mrwweb commented 3 months ago

This is good feedback, I may tweak where that listener is so it works on either (or any child DOM node, thanks to event bubbling).

I'm really glad to hear that focus is staying on the parent items. That is not what I had expected (I didn't look very hard), but that's awesome. I'd want to test that with a few different browsers to confirm. Sounds really promising!