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>
</span>
</button>

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();
        
    });

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

        $('body').toggleClass('overlay-active');
        $('button.hamburger').toggleClass('is-active');

        return false;
        
        });
    }

})(jQuery);

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.