Nothing like wasting JavaScript on something that doesn't even need to be scripted anymore. Much less require the mind-numbingly derpy train wreck laundry list of how NOT to use JavaScript that is jQuery.

Especially since as scripting only functionality, it's an accessibility violation.

Put an input before the menu using the HTML 5 hidden attribute and aria-hidden="true". Create a empty label after the menu where the FOR attribute points at the input's ID. Add another empty label inside your NAV that's the same.

In a media query for your trigger width (which should be in EM, not pixels)

input:target + nav { /* show the menu */ }

nav > label {

/* make fullscreen fixed so click outside to close */ }

nav + label:before {

/* make your hamburger icon */

}

input:target + nav + label:before {

/* replace hamburger with cancellation X */

}

DONE. Has not been JavaScript's job in over a decade. No matter how many scripting fanboys can't keep it in their pants.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store