CSS
body{
padding: 0;
margin: 0;
overflow: hidden;
}
.bg{
height: 100vh;
width: 100%;
background-color: blue;
}
.bg.active {
background-color: black;
}
.btn {
top: 20%;
text-align: center;
left: 45%;
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
}
.btn span, .btn span:before, .btn span:after {
height: 5px;
width: 50px;
background: white;
display: block;
content: '';
position: absolute;
}
.btn span:before {
top: -15px;
}
.btn span:after {
bottom: -15px;
}
.btn span, .btn span:before, .btn span:after {
transition: all 400ms ease-in-out;
}
.btn.active span {
background-color: transparent;
}
.btn.active span:before, .btn.active span:after {
top: 0px;
}
.btn.active span:before {
transform: rotate(45deg);
}
.btn.active span:after {
transform: rotate(-45deg);
}
JAVASCRIPT
(function() {
var div = document.querySelector(".bg");
document.querySelector(".btn")
.addEventListener("click", function(e) {
e.preventDefault();
this.classList.toggle("active");
if (this.classList.contains("active")) {
div.classList.add("active");
} else {
div.classList.remove("active");
}
});
}());
