Not that kind of hamburger.

I don’t know why, but that three-lined icon is called a hamburger icon. This thing:

You see it a lot in mobile sites, and especially in apps like Facebook. There’s one in the upper right of this site, too. On some sites, like on Time Magazine, it opens a menu. Here, it opens an overlay. (I subscribe to the mindset that you’re here to do one thing on my site: read, with no distractions. If you want to search, that’s what the menu is for. And that’s where all the widgets are, like recent posts and the tag cloud.)

But regardless of what happens when you click the hamburger, chances are you’ll want to toggle it back, or close whatever it opened. On my site, the hamburger turns into an × to indicate that the overlay can be closed. But it’s a flicker, not an easy transition. Today’s experiment was the first step in changing that.

And so I present: the animated hamburger icon.

See the Pen Animated Hamburger by Paul (@peiche) on CodePen.0

This works in the latest version of Chrome, Firefox, Opera, and Internet Explorer. It might work in more, but that’s all I tested. There’s nothing too crazy here, to be honest; it uses relative and absolute positioning for the container and bars, and it uses the transform and transition properties to animate the change.

Husband. Daddy. Programmer. Artist. I'm not an expert, I just play one in real life.