- Página Inicial
- Códigos CSS Prontos
- Menu Hamburguer Seta Left
- Voltar
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
Publicado por: Loop Nerd
1.209 Visualizações
Deixe um comentário