Animated Burger nav menu with sass and html

Animated burger menu

After a long break, i thought about again turning back into blogging. In this post, i will explain a simple way to create an animated burger navigation menu which is also called lined navigation menu or lined bar menu. It is so simple so that , you could use your own creativity to adjust the rotation or position to form new symbols.



The html structure contains


<div class="button_container">
   <a class="animated-button">

The class .animated-button is the container of 4 lines which are made with the span tags. Now lets style them with sass


   display: inline-block
   cursor: pointer
   width: 40px
      display: block
      background: #fff
      position: relative
      top: 0
      width: 100%
      height: 5px
      transition: all ease 0.3s
      margin-bottom: 3px
         width: 0px
         opacity: 0
         transform: rotate(-45deg)
         top: 12.5px
         transform: rotate(45deg)
         top: -12.5px

And Here is the plain css output



.button_container .animated-button {
 display: inline-block;
 cursor: pointer;
 width: 40px;
.button_container .animated-button span {
 display: block;
 background: #fff;
 position: relative;
 top: 0;
 width: 100%;
 height: 5px;
 transition: all ease 0.3s;
 margin-bottom: 3px;
.button_container span:nth-child(2),
.button_container span:nth-child(3) {
 width: 0px;
 opacity: 0;
.button_container span:nth-child(1) {
 transform: rotate(-45deg);
 top: 12.5px;
.button_container span:nth-child(4) {
 transform: rotate(45deg);
 top: -12.5px;

And now we need to toggle the class of the button to trigger the animation. So we a need a little bit of jquery




Now we have an animated navigation burger menu. We can easily customize the animation either by adjusting the positions and rotate degree on the child span elements.

1 Comment

  1. I hadn’t thought of using containers but that’s a great idea. Thanks so much for sharing!

Leave a Reply