Animated Hamburger Icon

Posted By : Gaurav Arora | 22-Sep-2017

jquery

Hi, As we all know that Hamburger icon is a very common thing in web and mobile applications. For creating the same there are plugins available and we can also create your very own custom animated icon.

For creating our custom icon firstly we need to create the HTML

Now we will write some CSS for the same and we will also use some animation properties like transition and transform

       .icon{
           width: 80px;
           height: 50px;
           position: relative;
           margin: 10px auto;
           transform: rotate(0deg);
           transition: .5s ease-in-out;
           cursor: pointer;
       }
       .icon i{
           position: absolute;
           height: 10px;
           width: 100%;
           background: #d3531a;
           border-radius: 10px;
           opacity: 1;
           left: 0;
           transform: rotate(0deg);
           transition: .25s ease-in-out;
       }
       .icon i:nth-child(1) {
           top: 0px;
       }
       .icon i:nth-child(2),.icon i:nth-child(3) {
           top: 18px;
       }
       .icon i:nth-child(4) {
           top: 36px;
       }

The above can be modified as per the requirement.

Now we write a jquery function to toggle a class on the icon, with the help of which we can animate our icon.

       $(function(){
           $('.icon').click(function(){
               $(this).toggleClass('open');
           });
       });

When we click on the icon the above function will toggle a class on the icon.

Now we will write some css with respect to that open class that will toggle on the icon

       .icon.open i:nth-child(1) {
           width: 0%;
           top: 18px;
           left: 50%;
       }
       .icon.open i:nth-child(2) {
           transform: rotate(45deg);
       }
       .icon.open i:nth-child(3) {
           transform: rotate(-45deg);
       }
       .icon.open i:nth-child(4) {
           width: 0%;
           left: 50%;
           top: 18px;
       }

In this way we can create our Animated Hamburger Icon