How to Animate a CSS-Only Hamburger Menu and Icons

Hamburger menu icons have become a staple in many websites and web apps, and whether you like them or not, they are becoming a familiar and recognizable UI action button. Users are associating this icon with the showing and hiding of menus, and its compact, space-saving nature makes it a desirable style, particularly on smaller screens.

In the past, you may have created or downloaded an icon and dropped it into your document. This is all well and good, and if you’re using image sprites, then you’re on course for an easy implementation.

Today though, I’m going to show you how to create a CSS-only version of the famous hamburger menu icon. With mobile experiences and web animation coming of age, and the dawn of design specs like Google’s Material Design, users are also expecting a more interactive experience.

In the demos, we’ll create some neat animations for our icons, indicating that they are “active”, or that perhaps a menu is open. I’ll use a teeny little bit of JavaScript to make that happen. Alright, let’s dig in!

Common Markup

I’ll be creating 4 different demos. The markup for each button is fairly similar, and each button has one common class and one unique class. Each button consists of a parent button tag, with an inner span tag. The parent tag will play container to the icon, and allow us to add padding and background colors to the icon. The span tag will actually play home to the “hamburger bars”. Here’s the markup:

OK, let’s look at the common CSS which will be used across all buttons.

Common CSS

For starters, I’ve reset all the button styles so that no shadows, borders, and default appearances are visible. I’ve also defined a width and height of the button (which will come in handy for the animation parts), and I’ve hidden the text. Here’s the CSS for the parent cmn-toggle-switch class:

Now, the inner span tag is actually home to the hamburger bars. We need three bars, so I’ll use the tag itself, and its pseudo elements ::before and ::after. The positioning of each bar (and the span tag itself) is all mathematically calculated based on the dimensions of the parent button.

If you’re a Sass user like myself, then this is very easy and you’ll find all the Sass and variables for editing in the source code. If not, you’ll have to think a little harder and do more math if you want to achieve different sizes than the demos below. Here’s the CSS for the inner spans:

Style 2 – Animate To “X”

This version of the hamburger icon animates it to an “x” by moving the top and bottom bars to the vertical-center of the icon, then rotating them. I used transition delays to achieve the overall effect, as I wanted the transform to the “x” to occur after the top and bottom bars moved to the middle. Here’s the CSS:

Of course, I’m iterating over all the icons. In your app however, you’ll likely have only one icon, so please edit the JS to suit.

Sass To The Rescue

As I mentioned above, if you’re using Sass, it’ll make your life a whole lot easier. In the source code, all the Sass variables (only 4 of them) are set up making it very easy to edit the size of the button, thickness of the hamburger bars, and padding between the parent button and the inner span. It really saves a whole lot of time!

Wrap Up

And that’s a wrap! Don’t forget, you can view the demo and download the source by clicking the links below, and if you have and questions, comments, or feedback, you can also leave them below.