CSS only menu toggle - is this a good way to approach it?

For years I've used jQuery slideUp/Down/Toggle() for showing menus on mobile devices. However, recently I've started using :has selectors more and that's opening up the possibility to do CSS-only versions:

My menu toggle button becomes a `label` containing a checkbox (hidden). When you click the label, it checks the checkbox
The menu css has:

.my-menu {
  display: none;
}

body:has(input#menu-toggle[type=checkbox]:checked) .my-menu {
  display: block;
}

.my-menu {
  display: none;
}

body:has(input#menu-toggle[type=checkbox]:checked) .my-menu {
  display: block;
}

Is this a good way to approach it, or should I stick to some javascript anyway as I should be setting aria-expanded etc (which could also drive the CSS)?

What other drawbacks might I be missing here?

glutonium•4/10/23, 9:28 AM

using checkbook as a click listener is quite an old trick.. and it doesn't necessarily require the has selector
u can do it with the general selector ~

glutonium•4/10/23, 9:44 AM

glutonium•4/10/23, 9:45 AM

i haven't yet cleared the concept of :has so i made with general selector ~

13eck•4/10/23, 11:49 AM

As boob said, using a checkbox is a very old trick with a long history. But I would advise against using for now as browser support isn’t quite there yet. It’s not supported in Firefox:
https://caniuse.com/css-has

13eck•4/10/23, 11:52 AM

Also, a good article on progressive enhancement for a slide-in nav menu:
https://gomakethings.com/progressive-enhancement-the-new-hotness/