Skip to content

Instantly share code, notes, and snippets.

@Felipe-Marques
Created November 25, 2019 20:46
Show Gist options
  • Save Felipe-Marques/c4ead96ba9edaa64a66f7ce6c8bc9912 to your computer and use it in GitHub Desktop.
Save Felipe-Marques/c4ead96ba9edaa64a66f7ce6c8bc9912 to your computer and use it in GitHub Desktop.
Toggler com HTML, CSS e JS.
<!-- Dentro da Navbar-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#minhaNavBar">
<div class="toggler-btn">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
</button>
$(document). ready(function(){
$('.navbar-toggler').click(function(){
$('.navbar-toggler').toggleClass('.change')
});
})
.toggler-btn {
border: 2px solid #black;
padding: 5px;
transition: all 1s ease;
}
.bar {
width: 30px;
height: 3px;
margin: 5px;
background: #blue;
transition: all 0.5s ease;
}
.change .bar1 {
transform: rotate(45deg) translate(8px, 5px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: rotate(-45deg) translate(6px, -3px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment