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.

 

HTML

The html structure contains

 

<div class="button_container">
   <a class="animated-button">
     <span>&nbsp;</span>
     <span>&nbsp;</span>
     <span>&nbsp;</span>
     <span>&nbsp;</span>
   </a>
</div>

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

SASS

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

And Here is the plain css output

CSS

 

.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 .animated-button.open span:nth-child(2),
.button_container .animated-button.open span:nth-child(3) {
 width: 0px;
 opacity: 0;
}
.button_container .animated-button.open span:nth-child(1) {
 transform: rotate(-45deg);
 top: 12.5px;
}
.button_container .animated-button.open 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

jQuery

 

 $(document).on('click','.animated-button',function(){
 $(this).toggleClass('open');
 });

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.

Leave a Reply