Rencently I've 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:

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

< div class = " container " > < input id = " toggle " type = " checkbox " > < label class = " toggle-container " for = " toggle " > < span class = " button button-toggle " > </ span > </ label > < 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 >

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

* { box-sizing : border-box ; } html, body { margin : 0 ; } body { font-family : sans-serif ; background-color : #F6C390 ; } a { text-decoration : none ; } .container { position : relative ; margin : 35 px auto 0 ; width : 300 px ; height : 534 px ; background-color : #533557 ; overflow : hidden ; }

Before 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:

#toggle { display : none ; } #toggle:checked { & ~ .nav { } }

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:

Upgrade Your JS Go from vanilla JavaScript 👉 React

Watch for FREE

And this is the code to get it working:

$transition-duration : 0.5 s ; .nav-item { position : relative ; display : inline-block ; float : left ; clear : both ; color : transparent ; font-size : 14 px ; letter-spacing : - 6.2 px ; height : 7 px ; line-height : 7 px ; text-transform : uppercase ; white-space : nowrap ; transform : scaleY ( 0.2 ) ; transition : $transition-duration , opacity 1 s ; & : nth-child ( 1 ) { letter-spacing : - 8 px ; } & : nth-child ( 2 ) { letter-spacing : - 7 px ; } & : nth-child ( n + 4 ) { letter-spacing : - 8 px ; margin-top : - 7 px ; opacity : 0 ; } & :before { position : absolute ; content : '' ; top : 50% ; left : 0 ; width : 100% ; height : 2 px ; 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.

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.5 s ; #toggle:checked { & ~ .nav { .nav-item { color : #EC7263 ; letter-spacing : 0 ; height : 40 px ; line-height : 40 px ; margin-top : 0 ; opacity : 1 ; transform : scaleY ( 1 ) ; transition : $transition-duration , opacity 0.1 s ; & :before { opacity : 0 ; } } } }

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 a 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.05 s ; .nav-item { @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 a inversely staggered transition. Just like this:

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

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!

Like this article? Follow @lmgonzalves on Twitter