Thank you for this nice click-menu. Your reasoning on CSS-Tricks resonates with me and I would like to use this in one of my projects.

While I am not anti-GPL, I would like to ask whether you could consider to license it (also) under a permissive license such as MIT or BSD? I absolutely don't mind anyone to copy and adapt our HTML/CSS/JS. But GPL forces us to always check that we we do not combine it with code under a conflicting license.

It is necessary to change the way in which the ids of the submenus are generated .. it is better to be based on the id of the parent or the container div ... currently it is based on the text of the link that has the submenu but it causes problems when you have the same menu in two different parts of the website.

The demo features a main menu entry "home" without a submenu. If any submenu is expanded, a click on the main menu entry without submenu leaves it open.

Example: I click on "Services" and the relative sub-menu is expanded. When I then click on "Home" the Services-sub-menu remains expanded. This is an issue only if you are already on the "Home" page, however. In any other case, a click would lead you to another page.

I did not find in the JavaScript, which code prevents a click on Home to contract the other sub-menu. Should not be difficult to fix, though.

Feature Request

It would be really useful if the menu would close itself when the user starts scrolling down. For example, this scenario:

1. User opens a dropdown
2. User starts to scroll down the page without closing the menu
3. The menu closes itself because the user started scrolling away without clicking on anything.

ul's need to be set visibility: visible on hover, focus-within - to override visibility: hidden in line 8.

Alternatively, we could change line 8 to display: none

The MIT License is used by the vast majority of front-end code and frame-works (Bootstrap, Tailwindcss, React, Vue, Alpine,...) because it frees the user from thinking twice about the legal implications.

Currently the script will fail if the menu's parent element doesn't have an ID set. This is small issue, but this seems like an unnecessary requirement. The script could automatically set an ID if one doesn't exist.

Right now, the way the ID for each submenu is generated can pull in special characters, probably including those that might be invalid. For example, here's one from a site I'm working on right now: exhibitions-|-collections-submenu. The solution is to either drop any characters other than numbers and letters or switch to something that is guaranteed to be unique. I just updated the script to ensure submenu IDs are unique per-menu (see #11), so I should probably switch to something that is also unique per-menu-item.

I feels stupid myself. You've noted that "using visibility instead of display allows for easier transitions and animation of submenus". So I've playing with your demo and trying to add animation/transition to icon and submenu, but I couldn't make it work. Could you please add some animation as example?

While I don't like it, it would make the script more useful to more people if this supported multiple levels of submenus. That said, doing then must not come at the expense of being able to make "mega menus" that show nested lists within the top-level submenu. Therefore, the secondary submenu feature would need to be configurable in a way that makes it opt-in.

The demo code features a gap between the main menu and the sub-menu. With CSS-only this makes it difficult to click on an entry in the sub-menu because the sub-menu disappears when moving the cursor over the gap.

Right now, the script will select any nested <ul> and treat it as a submenu. It would be good to allow passing a custom selector for cases where that might not be the desired behavior.