6 replies

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

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?

KP-C

Kevin Powell - Community•3y ago•

6 replies

Kiers

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

label

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;
}

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads