Feature request: Allow for multiple menus to be open at the same time

[ajplopez]

This is probably not a good idea but thought I would throw it out there anyway.

I thought it would be neat that when on mobile, the user could expand multiple menus at once. Currently clicking between multiple top levels will just collapse the open menu. But on mobile, having multiple open menus might be desirable and results in less "jumpiness" when you have a stacked menu that collapses.

[mrwweb]

Sounds like we're aligned on this one. I know the issue you're describing , and I'm even suspect of exclusive accordions that enforce one-open-at-a-time, but it also feels like probably more trouble than it's worth to provide a mobile-only solution here. (If someone has a genius idea for this, I'm open). I have wondering about trying to get a little be more mobile-friendly stuff into this library, but that's still only a vague thought.

I'm leaving this issue open for now, but not expecting to do anything about it at this time.

One thing I have done to can help with just a bit of this though is the following snippet:

const menu = document.getElementById('clicky-menu');
menu.addEventListener('click', function (e) {
	const el = e.target;
	if (el.hasAttribute('aria-expanded')) {
		const boundingRect = el.getBoundingClientRect();
		/* Comparing to value greater than 0 as low values seem to cause problems */
		if (boundingRect.top < 20) {
			el.scrollIntoView();
		}
	}
});

There are situations where the auto-closing of a submenu leaves the newly opened menu partially off screen. This makes sure that the opened menu is always in the viewport.

[cbirdsong]

I addressed this by checking to see if open submenus are absolutely positioned before closing them automatically, though I can't easily share a demo because my fork has diverged pretty substantially from the Codepen.

if (window.getComputedStyle(openSubmenu).position === "absolute") {
	// Close this open submenu if it's absolutely positioned, which means it might overlap with the one we're about to open
	toggleSubmenu(openButton);
}