The “hamburger” icon – a vertical stack of equal-length lines – universally means “click me for menu!” It makes sense: menus are often vertical lists of navigation options.
I first saw this sweet technique on Grooveshark’s mobile site for making the hamburger icon using simple CSS. It’s pretty genius, and I’ve started using it wherever there’s need for that hamburger dude. Here’s your HTML:
<a href="#menu" class="menu-button">Menu!</a>
And here’s the styling:
.menu-button {
background-color: #333;
border-radius: .25rem;
font-size: 0;
line-height: 0;
padding: .75rem .5rem;
}
.menu-button::after {
content: " ";
border-color: #ccc;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
}
The key is CSS borders. Note the border-style
on .menu-button::after
: it has a solid
style, which forms the top line, and a double
style, which forms the bottom two lines. One could easily add :focus
, :hover
and :active
states to make it respond to interaction.
(Unfortunately, using em
units doesn’t always make for equal lines, so I stick with pixels. Also, make sure you include pixel fallbacks for the rem
units.)