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