Menu Hamburguer Seta Left
Postado: 8 de outubro de 2021
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
Publicado por: loopnerd
693 Visualizações
Deixe um comentário