Menu Hamburguer Seta Left

Neste artigo vamos fazer um Menu Hamburguer quando clicado se transforma em uma seta para esquerda com html css e jQuery.

Menu de Hambúrguer CSS que pode ser claramente compreendido com o próprio nome.

Ele tem uma animação muito suave e simples quando você clica no botão. Inicialmente, o botão é apenas um botão de menu de hambúrguer. Quando clicamos nele, ele usa animação para converter as linhas horizontais para formar um botão em forma de Seta.

Html:

<div class="mobile btn-mobile">
  <div class="hamburguer"></div>
</div>

Css:

.btn-mobile {
  
  width: 50px;
  height: 50px;
  margin:auto;
  position: relative;
  transition-duration: 0.4s;
  cursor:pointer;

}

.btn-mobile .hamburguer {

  transition-duration: 0.4s;
  position: absolute;
  height: 5px;
  width: 40px;
  top: 22px;
  left:5px;
  background-color: #7d7d7d;
  border-radius:6px;

}

.btn-mobile .hamburguer:before {

  transition-duration: 0.4s;
  position: absolute;
  width: 40px;
  height: 5px;
  background-color: #7d7d7d;
  border-radius:6px;
  content: "";
  top: -13px;

}

.btn-mobile .hamburguer:after {

  transition-duration: 0.4s;
  position: absolute;
  width: 40px;
  height: 5px;
  background-color: #7d7d7d;
  border-radius:6px;
  content: "";
  top: 13px;

}

.btn-mobile.open .hamburguer {

  transition-duration: 0.4s;
  transform: rotateZ(180deg);
  background-color:#009fff;

}

.btn-mobile.open .hamburguer:before {

  transform: rotateZ(45deg) scaleX(0.75) translate(20px, -6px);
  top:-15px;
  background-color:#009fff;

}
.btn-mobile.open .hamburguer:after {
  
  transform: rotateZ(-45deg) scaleX(0.75) translate(20px, 6px);
  top:15px;
  background-color:#009fff;

}

Script:

<script src="js/jquery.js"></script>
<script type="text/javascript">
    
  $(function () {

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

  });

</script>

Veja o Resultado!

Baixar Código Veja Funcionando