When is a hamburger more than a hamburger?

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?

One way is to use animation to morph the lines of the icon into menu items, as visualized in this dribbble shot by Vitaly Rubtzov:


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.)

Cool, huh? Even cooler is that this is CSS—no JavaScript.

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.