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.


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

    Hey Neil,
    Nice find, it made me think of this:
    From this ressources page:

Leave all Comment