The animation provides nice user feedback about what happened and how to get out of it, but at the cost of code bloat and reliance on JavaScript.
Here is an even simpler basic menu icon that relies on a single Unicode extended character, U+2630 "Trigram for heaven." I hope using it for a menu icon does not offend a billion people on the other side of the world! It's super easy to use, and makes for lean code, but not as style-able and maybe not exactly the "iconic" look of the classic hamburger menu. I'll add the same character to the right, but bolded, to make it look more like an icon.
☰ ☰
In Chrome on Windows 8.1, bolding this character has such a subtle effect that I can't make it out unless the character is much enlarged. I would enlarge it much when making it a finger-tappable target icon, so bold is worth considering. Strange that bolding the character makes it look a bit narrower.
I see a reference on the Web to incomplete font support for U+2630 in Chrome and Android as of a few years ago, and a recommendation to use U+2261 "Identical to" instead (the decimal for that is 8801). Here is what that looks like.
≡
☰ is 9776 regular, ☰ is 9776 bold, ≡ is 8801 regular, ≡ is 8801 bold.
Bolding makes much more difference with 8801, at least in Chrome on Windows 8.1. But 8801 uses much less of the available vertical space in the character cell, and looks a bit squashed. To use 8801, I'd want to employ a larger magnification factor, which is easy enough.
In summary.
| HTML/CSS | 9776 | 8801 | 8803 | ||||
|---|---|---|---|---|---|---|---|
| Basic | Animated | normal | bold | normal | bold | normal | bold |
| ☰ | ☰ | ≡ | ≡ | ≣ | ≣ | ||
Another character option is 8803 ( ≣ ). It does not render (renders as the unknown character glyph) in Chrome on Android KitKat. It renders big and bold in many other browsers; looks nice. In terms of visual language, it seems like most hamburger menus use three bars rather than four.
Looking at this page in Safari Technology Preview 16 on MacOS 10.11.6, I have to say that 9776 "Trigram for Heaven" has the best look as a hamburger menu icon.
Different browsers render these characters considerably differently. In Chrome 60 on Windows 8.1, 9776 looks spindly even when bolded. In Safari Tech Preview 16 on El Capitan, it looks bold and thick, even the normal un-bolded rendering. Spindly doesn't look like a hamburger menu, but the bold thick rendering totally gets it done.
In Safari on iOS 10.11 on a 2017 iPad, the bolded 9776 is barely bolder than the un-bolded, but either one would serve as a hamburger menu. The normal un-bolded 8801 is too spindly, but the bolded 8801 is thick and is the single character that most closely resembles the HTML/CSS solution, which I must admit is the best looking hamburger menu of these options, just a little bulky. 8803 renders nice and bold, but four bars is a lot.