html Hamburguer Animado

Posted 2021-05-11

$color: #fff;

$contsize: 50px;
$height-icon: 24px;
$width-line: 38px;
$height-line: 4px;

$transition-time: 0.4s;
$rotation: 45deg;
$translateY: ($height-icon / 2);
$translateX: 0;

.burger{
	width: $contsize;
	height: $contsize;
	z-index: 100;
	@include display(flex);
	@include justify-content(center);
	@include align-items(center);
	@media screen and (max-width:  $mobile) {
		
	}
}

.hamburger-icon {
 	width:$width-line;
 	height:$height-icon;
 	position:relative;
 	top: -2px;
 	display:block;    
	.line {
	    display:block;
	    background:$color;
	    width:$width-line;
	    height:$height-line;
	    position:absolute;
	    left:0;
	    border-radius:($height-line / 2);
	    transition: all $transition-time;
	    -webkit-transition: all $transition-time;
	    -moz-transition: all $transition-time;	    
	    &.line-1 {
	      top:0;
	    }
	    &.line-2 {
	      top:50%;
	    }
	    &.line-3 {
	      top:100%;
	    }
	}
	&:hover, &:focus {
		.line-1 {
		    transform: translateY($height-line / 2 * -1);
		    -webkit-transform: translateY($height-line / 2 * -1);
		    -moz-transform: translateY($height-line / 2 * -1);
		}
		.line-3 {
		    transform: translateY($height-line / 2);
		    -webkit-transform: translateY($height-line / 2);
		    -moz-transform: translateY($height-line / 2);
		}  
	}
	&.ativo {
		.line-1 {
			transform: translateY($translateY) translateX($translateX) rotate($rotation);
			-webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
			-moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
		}
		.line-2 {
			opacity:0;
		}
		.line-3 {
			transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
			-webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
			-moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
		}
	}
}

$('.hamburger-icon').on('click', function(e){
  e.preventDefault();
  $(this).toggleClass('ativo');
  $('.menu-responsivo').toggleClass('ativo');
})

<div class="burger">
  <a class="hamburger-icon" href="#" title="Menu">
    <span class="line line-1"></span>
    <span class="line line-2"></span>
    <span class="line line-3"></span>
  </a>
</div>