Skip to content

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.

2 Comments

  1. Avanti on January 5, 2019 at 12:36 am

    Hey Neil,
    Nice find, it made me think of this: https://codepen.io/bennettfeely/pen/twbyA
    From this ressources page: http://bennettfeely.com/
    ;-)

Leave a Comment





Scroll To Top