Skip to content

Instantly share code, notes, and snippets.

@M1nhNV
Created May 7, 2019 07:39
Show Gist options
  • Save M1nhNV/cb5b409f3134220a991227af72d25e08 to your computer and use it in GitHub Desktop.
Save M1nhNV/cb5b409f3134220a991227af72d25e08 to your computer and use it in GitHub Desktop.
button hamburger
<div class="btn-menu-sp">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
$(this).toggleClass('open');
/*
hamburger menu
*/
.btn-menu-sp {
width: 30px;
height: 23px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.btn-menu-sp span {
display: block;
position: absolute;
height: 1px;
width: 100%;
background: #707070;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.btn-menu-sp span:nth-child(1) {
top: 0px;
}
.btn-menu-sp span:nth-child(2), .btn-menu-sp span:nth-child(3) {
top: 12px;
}
.btn-menu-sp span:nth-child(4) {
top: 23px;
}
.btn-menu-sp.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
.btn-menu-sp.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.btn-menu-sp.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.btn-menu-sp.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment