Making a Hamburger Icon

One of the most common design components in web apps—and even full web pages—is the ☰ icon. These three horizontal, parallel lines are sometimes called the tribar, triple bar, pancake, or double Oreo, but these days the most common name, by far, is hamburger. The purpose of the hamburger icon is to toggle a menu of commands or options when clicked, so the hamburger is an efficient (although some critics would substitute the word “obscure”) use of space, particularly when either screen real estate is limited or the menu you want to display is large.

You can add the ☰ icon by using the HTML code ☰. However, if you want to manipulate the lines (for example, to animate them when clicked, as I show below), then you need create the individual lines using HTML and CSS. Let’s see how it’s done:

In the HTML Editor, we have a div element with class="hamburger", and its children are three div elements with class="hamburger-line". Surprisingly, we need just a few lines of CSS to turn this into a hamburger menu:

Lines 1-4:

.hamburger {…

Styles the <div class="hamburger"> tag.

Line 2:

cursor: pointer;

Changes the mouse cursor to a pointing finger when the user hovers the cursor over the hamburger.

Line 3:

width: 25px;

Sets the width of the hamburger.

Lines 5-9:

.hamburger-line {…

Styles the <div class="hamburger-line"> tag.

Line 6:

background-color: black;

Sets the color of the hamburger lines.

Line 7:

height: 4px;

Sets the height of each hamburger line.

Line 8:

margin-top: 4px;

Sets the spacing between the hamburger lines.

Tip

It’s not set in stone, but to achieve a balanced look for your hamburger icon, the height and margin-top values should be the same.

Note

Applying margin-top to all three lines results in a margin above the hamburger icon. If that extra space is a problem for your design, remove it by adding the following rule: .hamburger-line:first-child { margin-top: 0 }

To add some “wow” factor to your interface, you can animate the hamburger lines when the user clicks the icon. My favorite effect here is to animate the lines so that they form an “X” (the more-or-less universal symbol for “Close”) when first clicked, and then animate the lines back to normal when clicked a second time. Check it out:

The JavaScript tab includes an event handler that watches for clicks on the .hamburger element, and that handler toggles the active class on the .hamburger-line elements. Here’s what’s new in the CSS tab:

Line 9:

transition: opacity .5s ease-in, transform .5s ease-out;

Defines the animation parameters for the opacity and transform properties of the .hamburger-line class.

Lines 11-13:

.hamburger-line:first-child.active {
                                    transform: rotate(45deg) translate(6px, 6px);
                            }
                        

Sets up a transform on the first hamburger line when the active class is applied. The line gets rotated 45 degrees clockwise and shifted right and down by 6px.

Lines 14-16:

.hamburger-line:nth-child(2).active {
                                    opacity: 0;
                            }
                        

Hides the second hamburger line by changing its opacity to 0 when the active class is applied.

Lines 17-19:

.hamburger-line:last-child.active {
                                    transform: rotate(-45deg) translate(5px, -5.5px);
                            }
                        

Sets up a transform on the third hamburger line when the active class is applied. The line gets rotated 45 degrees counter-clockwise and shifted right by 5px and up by 5.5px.