DEV Community

Discussion on: Hamburger Menu in Minimal Javascript

Collapse
 
iamschulz profile image
Daniel 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 dev.to/jacobmparis/hamburger-menu-... :)