.p-hamburger.js-hamburger
span.p-hamburger__bar
- for (var x = 0; x < 3; x++) {
span
- }$color-key: #0d95cb;
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #ddd;
}
.p-hamburger {
cursor: pointer;
&__bar {
position: relative;
display: block;
width: 24px;
height: 18px;
> span {
display: inline-block;
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: $color-key;
transition: .35s;
&:nth-of-type(1) {
top: 0;
}
&:nth-of-type(2) {
top: 8px;
}
&:nth-of-type(3) {
bottom: 0;
}
.is-active & {
&:nth-of-type(1) {
transform: translateY(8px) rotate(-405deg);
}
&:nth-of-type(2) {
opacity: 0;
}
&:nth-of-type(3) {
transform: translateY(-8px) rotate(405deg);
}
}
}
}
}const trigger = document.querySelector('.js-hamburger');
const body = document.querySelector('body');
trigger.addEventListener('click', function () {
if( this.classList.contains('is-active')) {
this.classList.remove('is-active');
body.classList.remove('is-nav-opened');
} else {
this.classList.add('is-active');
body.classList.add('is-nav-opened');
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.