Animated Hamburger Menu [Article] | Treehouse Blog

Hamburger menus are nice for toggling a cellular navigation. Including slick animations to indicate the open or closed state might be tough however I’ll clarify how this may be finished fairly simply. Let’s get began. ?

If video tutorials are extra your factor:

In case you’d wish to see a demo of this earlier than we get began, you’ll be able to see this in motion at my codepen:

Animated Hamburger Menu Codepen

We’ll have to create a number of recordsdata to get began: index.html, types.css, & app.js.

HTML

In our index.html file, lets setup a navigation with <nav></nav>.

Inside our nav tag, we’ll create a container for our hamburger menu. This can simply be a div with the category of hamburger-menu.

<nav>
    <div class="hamburger-menu"></div>
</nav>

Subsequent, we’ll add in every of the three hamburger menu ‘bars’. These might be divs with the category of ‘ham-bar’ however they may every get a novel class title as effectively. That is the code I’ll be working with:

<nav>
    <div class="hamburger-menu">
        <div class="ham-bar bar-top"></div>
        <div class="ham-bar bar-mid"></div>
        <div class="ham-bar bar-bottom"></div>
    </div>
</nav>

That ought to be it for our HTML, so now let’s sort out the CSS.

CSS

We will get began with some fundamental types and resets:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

physique {
    background-color: #ccc;
}

As soon as that’s finished, lets add some fast stylings to the nav.

nav {
    padding: 1rem;
    background-color: #222;

    show: flex;
    justify-content: flex-end;
    align-items: middle;
}

For the reason that solely youngster factor of our nav is the <div class="hamburger-menu"></div> we are able to use flex to justify the content material to flex-end in order that our hamburger menu is all the way in which to the proper.

Subsequent, we are able to begin styling our precise hamburger menu.

.hamburger-menu {
    top: 50px;
    width: 50px;
    place: relative;
    cursor: pointer;
    padding: 1rem;
}

We place this relative since its youngster parts (<div class="ham-bar"></div> * 3) will must be positioned completely.

All the <div class="ham-bar"></div> parts will get the next types:

.ham-bar {
    width: 70%;
    top: 4px;
    background-color: white;
    border-radius: 25px;
    place: absolute;
    prime: 50%;
    left: 50%;
    rework: translate(-50%, -50%);
    transition: rework .6s, opacity .8s, prime .6s;
}

You’ll discover you’ll be able to solely see one ham-bar now. Truly, all three are seen. They’re simply all completely positioned to the middle of .hamburger-menu. So let’s alter the bar-top and bar-bottom:

.bar-top {
    prime: 25%;
}

.bar-bottom {
    prime: 75%;
}

Now you must see your hamburger menu! Subsequent, we’ll wish to hop into the HTML and add a category of lively to our <div class="hamburger-menu"></div>. It is because once we click on on our hamburger menu, we’ll wish to toggle this class on and off.

When the hamburger menu has a category of lively, we’ll wish to model the <div class="ham-bar"></div> appropriately. Lets try this now.

For bar-top we wish to middle it and rotate it:

.hamburger-menu.lively .bar-top {
    rework: translate(-50%, -50%) rotate(-315deg);
    prime: 50%;
}

for bar-mid we wish to set the opacity to 0:

.hamburger-menu.lively .bar-mid {
    opacity: 0;
}

for bar-bottom we wish to middle it and rotate it:

.hamburger-menu.lively .bar-bottom {
    rework: translate(-50%, -50%) rotate(-225deg);
    prime: 50%;
}

Now go forward and add a category of lively to your hamburger-menu within the HTML to verify your hamburger-menu resembles and x. If it does, nice! If not, make sure that to re-read the above and determine the place you’ve gone incorrect. As soon as that’s finished, let’s transfer on to toggling this lively class by way of JavaScript!

JavaScript

The JavaScript may be very easy, we’ll simply wish to add an occasion listener on <div class="hamburger-menu"></div>. We will create a variable for this as effectively:

const hamMenu = doc.querySelector('.hamburger-menu');
hamMenu.addEventListener('click on', () => {

});

All we wish to do when this occasion is triggered, is toggle a category of lively to <div class="hamburger-menu"></div>:

const hamMenu = doc.querySelector('.hamburger-menu');
hamMenu.addEventListener('click on', () => {
    hamMenu.classList.toggle('lively');
});

And that’s it, your hamburger menu ought to toggle each the open and closed state when clicked!