mrwweb/clicky-menus

Simple click-triggered navigation submenus. Accessible and progressively enhanced.

clicky-menus's Issues

Include animations in demo

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?

Gap above submenu breaks menu in CSS-only use

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.

Generate id based on attribute, not anchor text

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.

Consider support for multiple levels of submenu

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.

Add `position: relative` to list items in styles

I suspect almost everyone is already doing this, but I've realized that this should probably be in the default styles, otherwise, the placement of submenus is very unpredictable. Almost everyone already does this, but I think I should add it.

.clicky-menu li {
    position: relative;
}

Feature: Make submenu selector configurable

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.

Generate ID / aria-controls in a way that doesn't result in potentially invalid attribute characters

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.

Feature request: NPM Package

It would be fantastic if this was something we could install using NPM.

I would use it all the time.

Feature request: close on scrolling away

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.

Would you consider dual-licensing your code under MIT/BSD?

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.

Don't require ID on menu parent

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.

Submenu does not close when clicking a top-level anchor link

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.