Dylan Allen Blog

Hamburger CSS Animation

A common web navigation element is the hamburger menu. I remember when it became common, and there were UX arguments about using it due to the fact that not everyone would know what it was. I think that argument has been put to bed since even my 2.5 year old daughter knows how to use a mobile app. Below I will give you a straight-forward way to add a hamburger menu with a nice css animation. It is something I have re-used on several sites, so I am also kind of putting it here so I know where to come back when I need it ;)

The HTML

<a href="#" id="hamburger">
    <span></span>
</a>

Not much to it. We are going to use the pseudo elements ::before and ::after to generate the hamburger menu with css.

The CSS

#hamburger {
    width: 25px;
    height: 20px;
    display: inline-block;
    position: relative; 
}

#hamburger span, #hamburger::before, #hamburger::after {
  width: 100%;
  height: 2px;
  top: 0;
  right: 0;
  left: 0;
  background-color: #999;
  position: absolute;
  transition: all 0.3s ease;
}

#hamburger span {
  top: 50%;
  margin-top: -1px;
}

#hamburger::before {
  top: auto;
  bottom: 0;
  content: "";
}

#hamburger::after {
  content: ""; /* This ensures the before and after elements exist */
}

.menu-active #hamburger:before {
  transform: translateY(-9px) rotate(45deg);
}

.menu-active #hamburger span {
  transform: translateY(0px) rotate(-45deg);
}

.menu-active #hamburger:after {
  opacity: 0;
}

This is where all the magic happens. All that is left for JS to do is to toggle the class of a parent element by "menu-active".

The JavaScript

var body = document.getElementsByTagName('body')[0];
var hamburger = document.getElementById('hamburger');

function hasClass(el, cls) {
    return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
}

function toggleClass(el, cls) {
    if (hasClass(el,cls)) {
        el.className = el.className.replace(new RegExp('(?:^|\\s)'+ cls + '(?:\\s|$)'), ' ');
        } else {
            body.className += " " + cls;
        }
}

hamburger.onclick = function(){toggleClass(body, "menu-active")};

What we are doing here is

  • Define the body tag (which can be any parent element of the hamburger button and the menu you plan to activate)
  • Write a function to check if an element has a class.
  • Write a function to toggle the class of an element.
  • Add an onclick event to the hamburger menu calling the toggle class function on the parent element.

And that is all there is to it!

Here is working example:



The case for Hamburgers

I am becoming more and more a fan of this element. I am developing a site right now that uses this as hamburger menu and a slide out menu for both desktop and mobile design. It keeps the user experience consistent across devices, the design clean (even as new top level menu items are added), and it is a lot easier on a developer to only have to set up one menu instead of a top dropdown for desktop and a slide-out menu for mobile. Everybody wins!

And here is a complete gist:

This article is my 3rd oldest. It is 625 words long, and it’s got 0 comments for now.