Animating the Hamburger Menu Toggle

There is a comprehensive animating Menu toggle CSS set of rules created by Jonathan Suh, it’s got more animation options than you can poke a stick at.

The basic mark up in HTML is…

<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box"><
<span class="hamburger-inner"></span>

The second CSS class for the button is the animating class – choose from the multitude on the site. Then you need to toggle a class to get the animations…

	$(function() {


    function toggleOverlay() {
        $('button.hamburger').on('click', function() {


        return false;


Here I am creating a toggle for the required ‘is-active’ class on the hamburger button and also setting a body CSS class ‘overlay-active’ to control my flyout overlay content.