<div class="site" id="site">
<div class="ham" id="navicon" onClick="toggleMobileNav()">
<div class="ham__burger"></div>
<div class="ham__burger"></div>
<div class="ham__burger"></div>
</div>
<div class="overlay"></div>
<div class="content"></div>
</div>
body {
margin: 0;
padding: 0;
}
.site {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
position: relative;
}
.ham {
font-size: 2rem;
height: 2.5em;
width: 2.5em;
position: relative;
z-index: 3;
&:hover {
cursor: pointer;
}
&__burger {
background: white;
height: .25em;
border-radius: .125em;
transition: .25s;
position: absolute;
&:nth-child(1) {
width: 70%;
top: 0;
right: 0;
transform-origin: 100% 100%;
.open & {
width: calc(50% - .125em);
transform: rotate(-45deg);
background-color: rebeccapurple;
}
}
&:nth-child(2) {
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
.open & {
width: calc(100% + .5em);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
background-color: rebeccapurple;
}
}
&:nth-child(3) {
width: 65%;
bottom: 0;
left: 0;
transform-origin: 0 0;
.open & {
width: calc(50% - .125em);
transform: rotate(-45deg);
background-color: rebeccapurple;
}
}
}
}
.content {
position: absolute;
z-index: 1;
top: -5px; right: -5px; bottom: -5px; left: -5px;
background-blend-mode: multiply;
background-color: rebeccapurple;
background-image: url('https://i1.wp.com/monkeyhill.us/wp-content/uploads/2016/01/unsplash-buildings-llokingup-clouds.jpg?ssl=1');
background-position: center center;
background-size: cover;
.open & {
filter: blur(10px);
}
}
.overlay {
position: absolute;
z-index: 2;
top: 0; right: 0; bottom: 0; left: 0;
background: white;
opacity: 0;
transition: .25s;
.open & {
opacity: .5;
}
}
View Compiled
var navicon = document.getElementById("navicon");
var site = document.getElementById("site");
function toggleBurger() {
navicon.classList.toggle("open"),
site.classList.toggle("open")
}
navicon.addEventListener("click", toggleBurger, false);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.