Or, more properly, when is a hamburger menu more than an icon?
The “hamburger” icon—that little stack of three or four horizontal lines in the upper corner of your mobile device that opens a sidebar menu—is now a fixture in many apps…but how many people recognize why the icon looks like that?
The first time a user taps the icon, he or she immediately groks the connection between the design of the icon and what it represents. And by replacing the hamburger with the familiar × icon, the user also knows how to dismiss the menu.
Brilliant. But what would implementation look like?
Luis Manuel (Twitter, GitHub Pages) decided to find out—and created this: https://lmgonzalves.github.io/morphing-hamburger-menu/. Go try it out; I’ll wait. (Five seconds. Maybe seven.)
Luis provides a full walkthrough of his code on scotch.io: Building a Morphing Hamburger Menu with CSS.
Is a hamburger menu your best bet? That’s a whole nother subject. Better do some testing first. Here’s one article to get you thinking: UX designers: Side drawer navigation could be costing you half your user engagement.