emareg
Mobile navigation caret expansion doesn't rollup on second toggle
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.
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.
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.
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?