[Hamburger Menu Animation] Animate a hamburger menu into an "X" using css animations.

hamburger.html

<div id="menu-btn">
    <div class="bar bar-1"></div>
    <div class="bar bar-2"></div>
    <div class="bar bar-3"></div>
</div>

hamburger.js

// When the menu button is clicked
    $('#menu-btn').click(function() {

        var menuBtn = $(this);

        if (menuBtn.hasClass('open')) {

            menuBtn.toggleClass('open');

            // Close the menu
            //MotionUI.animateOut(mobileMenu, 'scaleOutDown bounceInOut', function() {});

        } else {

            menuBtn.toggleClass('open');

            // Open the menu
            //MotionUI.animateIn(mobileMenu, 'scaleInUp bounceInOut', function() {});

        } // end else

    }); // end .click function

hamburger_style.css

/* Menu Button */

#menu-btn {
    position: fixed;
    top: 27px;
    right: 30px;
    width: 35px;
    height: 30px;
    z-index: 9999991;
    cursor: pointer;
    transition: all .5s ease;
}
#menu-btn .bar {
    position: absolute;
    display: block;
    left: 0;
    background-color: #713316;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    opacity: 1.0;
    transition: all .4s linear;
}
#menu-btn.home-menu-btn .bar {
    background-color: #fff;
}
#menu-btn .bar-1 {
    top: 0;
    transform: rotate(0);
}
#menu-btn .bar-2 {
    top: 12px;
}
#menu-btn .bar-3 {
    top: 24px;
    transform: rotate(0);
}
#menu-btn.open .bar-1, #menu-btn.open .bar-3 {
    top: 12px;
    background-color: #fff;
}
#menu-btn.open .bar-1 {
    transform: rotate(45deg);
}
#menu-btn.open .bar-2 {
    opacity: 0;
}
#menu-btn.open .bar-3 {
    transform: rotate(-45deg);
}