Building a Morphing Hamburger Menu with CSS

Introduction

Recently I found this awesome dribbble shot by Vitaly Rubtsov, and I could not resist the urge to try to implement it.

In this tutorial, I’ll explain the entire process of how to do it with CSS only, without using a single line of JavaScript. So, we will be seeing some CSS (and SCSS) tricks that will allow us to achieve an animation almost as smooth as the animated gif.

Here’s the CodePen of what we’ll build:

https://codepen.io/lmgonzalves/pen/KaWaJO

Markup

Let’s start with the HTML structure we’ll be using. See the comments for a better understanding.

<div class="container">
    <!-- This checkbox will give us the toggle behavior, it will be hidden, but functional -->
    <input id="toggle" type="checkbox">

    <!-- IMPORTANT: Any element that we want to modify when the checkbox state changes go here, being "sibling" of the checkbox element -->

    <!-- This label is tied to the checkbox, and it will contain the toggle "buttons" -->
    <label class="toggle-container" for="toggle">
        <!-- If menu is open, it will be the "X" icon, otherwise just a clickable area behind the hamburger menu icon -->
        <span class="button button-toggle"></span>
    </label>

    <!-- The nav menu -->
    <nav class="nav">
        <a class="nav-item" href="">Dashboard</a>
        <a class="nav-item" href="">History</a>
        <a class="nav-item" href="">Statistics</a>
        <a class="nav-item" href="">Settings</a>
    </nav>
</div>

Initial styles

Now let’s add some basic styles to start getting the look and feel we want. The code is pretty straightforward.

/* Basic styles */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

body {
  font-family: sans-serif;
  background-color: #F6C390;
}

a {
  text-decoration: none;
}

.container {
  position: relative;
  margin: 35px auto 0;
  width: 300px;
  height: 534px;
  background-color: #533557;
  overflow: hidden;
}

Toggle functionality

Before you start building the rest of the interface, let’s add the toggle functionality to easily change from one state to another.

The HTML we need is already in place. And the style to make it works could be something like this:

// To hide the checkbox
#toggle {
  display: none;
}

// Styles for the 'open' state, if the checkbox is checked
#toggle:checked {
  // Any element you need to change the style if the menu is open goes here, using the sibling selector (~) as follows

  // Styles for the open navigation menu, for example
  & ~ .nav {
  }
}

Building the closed state

To build the closed state, we need to transform the menu items into lines to make up the hamburger menu icon. We can come up with several ways to accomplish this transformation. We have decided to do it this way:

And this is the code to get it working:

$transition-duration: 0.5s;

// Showing nav items as lines, making up the hamburger menu icon
.nav-item {
  position: relative;
  display: inline-block;
  float: left;
  clear: both;
  color: transparent;
  font-size: 14px;
  letter-spacing: -6.2px;
  height: 7px;
  line-height: 7px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(0.2);
  transition: $transition-duration, opacity 1s;

  // Adjusting width for the first line
  &:nth-child(1) {
    letter-spacing: -8px;
  }

  // Adjusting width for the second line
  &:nth-child(2) {
    letter-spacing: -7px;
  }

  // Adjusting from the fourth element onwards
  &:nth-child(n + 4) {
    letter-spacing: -8px;
    margin-top: -7px;
    opacity: 0;
  }

  // Getting the lines for the hamburger menu icon
  &:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #EC7263;
    transform: translateY(-50%) scaleY(5);
    transition: $transition-duration;
  }
}

Note that here we have posted only the main styles for the nav items, which is the most important part. You can find the full code on GitHub.

Building the open menu

To build the open menu we need to restore the nav items from lines to normal text links, among other minor changes. Let’s see how to do it:

$transition-duration: 0.5s;

#toggle:checked {

  // Open nav
  & ~ .nav {

    // Restoring nav items from "lines" in the menu icon
    .nav-item {
      color: #EC7263;
      letter-spacing: 0;
      height: 40px;
      line-height: 40px;
      margin-top: 0;
      opacity: 1;
      transform: scaleY(1);
      transition: $transition-duration, opacity 0.1s;

      // Hiding the lines
      &:before {
        opacity: 0;
      }
    }
  }
}

The magic is in the details

If we look closer at the gif, we can see that all the menu items do not move at the same time, but in a staggered way. We can do that in CSS too! Basically, we need to select each element (using :nth-child) and set a progressively increased transition-delay. But that is certainly repetitive work. And, what if we have more items? Don’t worry, we can do it better with a bit of SCSS magic:

$items: 4;
$transition-delay: 0.05s;

.nav-item {

  // Setting delays for the nav items in close transition
  @for $i from 1 through $items {
    &:nth-child(#{$i}) {
      $delay: ($i - 1) * $transition-delay;
      transition-delay: $delay;
      &:before {
        transition-delay: $delay;
      }
    }
  }
}

Here we are using a loop, a variable interpolation, and some basic arithmetic operations. You can learn more about these and more awesome features in the Sass documentation site.

Please note that with this code we’ll get the desired staggered behavior for the close animation. We need to calculate the $delay slightly different for the open animation, to get an inversely staggered transition. Just like this:

$delay: ($items - $i) * $transition-delay;

Conclusion

And we are done with our fancy menu! We have also included some dummy elements, like in the animated gif, and you can see the final demo here.

So far, we have built a cool and functional menu just with CSS. However, if you are not in favor of using the CSS toggle system, it can be perfectly replaced by a few lines of JavaScript without too much effort.

You can find the full code on the GitHub repository, and also play with it directly on CodePen.

We hope this tutorial has been to your liking and you have found it useful!