Menu Hamburguer Redondo

Neste artigo vamos fazer um Menu Hamburguer Redondo 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 cruz.

Html:

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

css:

.btn-mobile {
  
  position: relative;
  width: 55px;
  height: 55px;
  transition-duration: 0.6s;
  margin:auto;

}

.btn-mobile .redondo {
  transition-duration: 0.6s;
  position: absolute;
  height: 55px;
  width: 55px;
  border-radius: 100%;
  background: transparent;
  border: 3px solid black;
}

.btn-mobile .redondo:hover {
  background: #fff;
}

.btn-mobile .hamburguer {
  transition-duration: 0.6s;
  position: absolute;
  height: 3px;
  width: 28px;
  top: 26px;
  background-color: #212121;
  border-radius: 3px;
  left: 14px;
}

.btn-mobile .hamburguer:before {
  transition-duration: 0.6s;
  position: absolute;
  width: 28px;
  height: 3px;
  background-color: #212121;
  content: "";
  top: -10px;
  border-radius: 3px;
}

.btn-mobile .hamburguer:after {
  transition-duration: 0.6s;
  position: absolute;
  width: 28px;
  height: 3px;
  background-color: #212121;
  content: "";
  top: 10px;
  border-radius: 3px;
}

.btn-mobile.ativo .redondo {
  background: #ffffff;
  border: 3px solid #2fd8df;

}

.btn-mobile.ativo .hamburguer {
  transition-duration: 0.6s;
  background: transparent;
}

.btn-mobile.ativo .hamburguer:before {
  transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);   
  background:#2fd8df;

}

.btn-mobile.ativo .hamburguer:after {
  transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);   
  background:#2fd8df;
}

.btn-mobile:hover {
  cursor: pointer;
}

Script:

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

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

});

</script>

Veja o Resultado !

Baixar Código Veja Funcionando