DEV Community


Discussion on: Hamburger Menu in Minimal Javascript

iamschulz profile image
I am Schulz • Edited

If you (ab)use a checkbox you can do this without any JS at all.

:checked ~ .sidebar__trigger {
    // styles for opened hamburger icon

:checked ~ sidebar {
    // styles for opened off canvas menu

To change the button text you could use the content property on the hamburger icon.

a rough implementation:

This brings the disadvantages of not using semantic HTML, however.

edit: nevermind, i just saw what you did there :)