Mobile navigation caret expansion doesn't rollup on second toggle

[TimDaub]

Go to classless.de on your mobile phone and expand the navigation by clicking somewhere near the caret sign ^.
You'll find that the navigation expands and shows all items. However, it's not possible to "close" or roll up the navigation anymore by again clicking the caret.

IMO, it's generally a mobile website user's expectation that such a kind of mechanism can be opened and closed.

I'm happy to send a PR if this is acknowledged as a problem/bug.

[emareg]

Hi TimDaub, thank you for pointing this out. I have also experienced this "problem" and I agree that the expectation is a toggle-behavior. However, the navigation dropdown works using the :hover selector which is only activated every time you click on the element. Only if you click somewhere else (e.g. background) the selector is deactivated. If you have a solution that does not require JS, I would really appreciate it.

[TimDaub]

Only if you click somewhere else (e.g. background) the selector is deactivated.

that's actually a nice touch and now that I'm aware of it - I like it.

If you have a solution that does not require JS, I would really appreciate it.

Yeah... I don't see how the problem can be fixed without using another pseudo selector other than :hover. However, I've once used another technique that also created an expandable, interactive, and responsive menu with CSS.

I've done this on this website here: https://doctoverse.com and I've been inspired by this codepen: https://codepen.io/mutedblues/pen/MmPNPG

Let me know if it'd make sense to implement that. Of course, we'd have to consider the possibility if it's doable in a "classless" way. But IMO that's already one step ahead.

[TimDaub]

I ended up forking classless and implementing it: https://github.com/rugpullindex/design-system/blob/master/src/design.css#L361-L490 You can look at it here: https://rugpullindex.com/

And while doing so, I noticed that as a little trick: I used a hidden input and a label to toggle the navigation on mobile. So I'm pretty sure that's against your design philosophy here, or isn't it?