<div id="neuburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #E3E3E3;
height: 100vh;
margin: 0;
}
#neuburger {
height: 160px;
width: 200px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
cursor: pointer;
}
.line.closed {
transition: box-shadow .5s ease-out;
box-shadow: none!important;
}
.line.disappear {
transition: box-shadow .5s ease-out;
}
.line {
transition: box-shadow .1s ease-out;
height: 15%;
width: 80%;
border-radius: 100px;
box-shadow:
-.3em -.2em 1em #fff,
inset .4em .5em .9em #E3E3E375,
.3em .2em .5em #88888890,
inset -.4em -.5em .9em #E3E3E390;
}
#neuburger:hover .line:not(.closed) {
box-shadow:
-.3em -.2em 1em #fff,
inset .4em .5em .9em #ddd,
.3em .2em .5em #88888890,
inset -.4em -.5em .9em #ddd;
}
#neuburger:active .line:not(.closed) {
box-shadow:
-.3em -.2em 1em #fff,
inset .4em .5em .9em #aaaaaa35,
.3em .2em .5em #88888850,
inset -.4em -.5em .9em #f2f2f2;
}
const neuburger = document.querySelector('#neuburger')
const changelings = document.querySelectorAll('.line:not(:nth-child(2n))')
neuburger.addEventListener('click', () => {
changelings.forEach(s => {
if (s.classList.contains('closed')) {
s.classList.toggle('closed')
setTimeout(() => s.classList.toggle('disappear'), 500)
} else {
s.classList.toggle('closed')
s.classList.toggle('disappear')
}
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.