This has some fairly new code so may only run in FF at the moment. (CSS flexbox, gap for instance.)
The HTML is very simple:
<div class="hamburger" onclick="hamburger(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>The CSS has the most code. A class of change is used with the rotated rectangles.
.change .bar1 {
transform: rotate(45deg);
transform-origin: top left 0;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: rotate(-45deg);
transform-origin: bottom left 0;
}The JS is very compact and used just to add and remove the class to the containing div (.hamburger) change.
function hamburger(x) {
x.classList.toggle("change");
}