How to Make an Animated Hamburger Menu Icon

Animate From Hamburger Icon to X Icon

Introduction

I’m sure you’ve seen the 3 horizontal bar image on mobile websites used to access the menu – another term for this image, is the hamburger menu icon.  These icons are used to save space and they’re universally understood to open a menu of some sort.  Today, I’ll show you how to animate one using HTML, CSS, jQuery and a great jQuery extension called jQuery Transit.  Let’s get started.

The demo code and example are available at the bottom of this tutorial.

The HTML and CSS

All we need is a parent div and 3 div children for the HTML markup.  This will provide the 3 horizontal bars and the container they are wrapped in.

The CSS is also really simple.  We just need to define the width, height and bottom margin of each horizontal bar (notice the last horizontal bar has no bottom margin).  I added hover effects and positioning to my CodePen example (see below), but this is optional.

Using jQuery and Transit

Now for the fun part.  You will need jQuery Transit to handle the rotation effects of the bar elements, so make sure it’s installed just after jQuery.

There are 2 jQuery functions in the JavaScript, and they work together.  First, at the bottom of the script, there is a function that runs when the user clicks on the hamburger menu icon.  This function toggles the state of the menu icon by sending the parameter ham or noham to the function changeIcon().  The second function, listed first, receives the state parameter to decide whether to animate the icon to a hamburger symbol or to an x symbol.

Animating the Horizontal Bars

There are 3 bar elements in our HTML with the classes .top, .middle, and .bottom.  The middle bar doesn’t require much work, because it doesn’t move.  It simply fades to transparent opacity:0; when the noham state is invoked, and fades back to opaque opacity:1; when the ham state is called. The top and bottom bars require a little more work.

The only attributes we need to change for the top and bottom bars are rotate and y.  The y coordinate defines each bar’s the vertical position, in pixels.  The rotate attribute sets how much rotation, in degrees, that we want each bar to spin.

Getting from Hamburger to X

To animate from the hamburger menu icon to the x icon, we need to first move all the bars so they are aligned vertically. This makes all of the bars appear as a single horizontal bar.  Next, we need to add the top bar’s height and bottomMargin together to get the midY variable.  Since each of the bars and their margins are equally separated, we can use the midY variable for both the top and bottom bar y offsets. The bottom bar must use the negative -midY variable.

Next, now that all of the bars are vertically aligned, all we need to do is rotate the bottom and top bars so they look like an “X”.  Since we know that a full rotation is 360 degrees, we will rotate one of the bars 45 degrees and the other 315 degrees.  Now, with the middle bar transparent, we have our X symbol.

Wrapping Things Up

Finally, we want to return to our original state if the user clicks the button again.  To do this, we simply reverse the process and assign it to the noham parameter that was passed to the changeIcon() function earlier.

You probably noticed the callback function() added inside each transition. These callbacks exist between animations so things flow nicely.  For each animation, there are 2 animations that take place, per bar: the y and the rotate animations (see above).  We want each animation to occur sequentially, not at the same time.  Callbacks keeps the bars in sync by forcing them to wait for one instance before starting the next.  If we didn’t have callbacks, the 1st of the 2 sequential animations would be too fast or ignored completely.

Animated Hamburger Menu Icon Demo

The height, width and margins in this demo have been enlarged for visibility purposes.

See the Pen Ndgywx by David Elliott (@sparkweb) on CodePen.dark