CSS-only hamburger menu

CSS-only solutions were always tempting for me. You can do pretty anything with JavaScript, can’t you? The question is: ‘Can you do it without JS?’. Looking for CSS-only solutions was always something that pushed my CSS skills further. So can be in your case.

Today we will create CSS-only hamburger menu from scratch. This is what we want to achieve:


An inspiration for this article was this awesome tutorial from SitePoint. It has some drawbacks, though:

  • As Dan Winer mentioned in comments, it’s performance is poor because it animates the entire page using left position property. In 2012 Paul Irish made an investigation and found out that animating with translate is more performant and prettier than TRBL (top/right/bottom/left). Some people complain that CSS translate makes fonts blurry. No worries, I found a solution for this also.
  • It is broken when menu height is greater than screen height.

My solution will address these issues while giving you insight how it works. Let’s make our hands dirty!

Start with some HTML

So here we have basically 3 elements: the menu itself, label and magic checkbox which will make our menu working. Let’s hide the menu content first.

Add a little bit of CSS

It’s important that we use transform translate here, not left property. This will increase the performance of our menu. The next thing we want to achieve is hiding the checkbox. The following code should do the trick:

What happens now is whenever you click on ‘menu’ text, the checkbox is toggled. Now we will connect the state of checkbox with menu’s position like this:

Hurra! Our menu appears and vanishes. Now let’s animate it and prepare for the situation when screen height is smaller than the menu’s.

With the code above we have the following effect:

See the Pen CSS only hamburger menu without styling by Maciej (@maciejmyslinski) on CodePen.

Polishing things up

After adding some ‘lorem ipsum’ content to simulate real web page and some additional styling to make things look pretty, we come to this final effect:

See the Pen CSS only hamburger menu by Maciej (@maciejmyslinski) on CodePen.


That’s it! I hope it was helpful. And if you are like me and you are crazy about CSS-only solutions, check out this awesome project created by Una. Happy coding!