CSS Animaton
A Pen by Siddharth Parmar on CodePen.
<div id="page-wrapper"> | |
<div id="title">Sidebar Interaction</div> | |
</div> | |
<div id="btn"> | |
<div id='top'></div> | |
<div id='middle'></div> | |
<div id='bottom'></div> | |
</div> | |
<div id="box"> | |
<div id="items"> | |
<div class="item">Item 1</div> | |
<div class="item">Item 2</div> | |
<div class="item">Item 3</div> | |
<div class="item">Item 4</div> | |
<div class="item">Item 5</div> | |
</div> | |
</div> |
const sidebarBox = document.querySelector('#box'), | |
sidebarBtn = document.querySelector('#btn'), | |
pageWrapper = document.querySelector('#page-wrapper'); | |
sidebarBtn.addEventListener('click', event => { | |
sidebarBtn.classList.toggle('active'); | |
sidebarBox.classList.toggle('active'); | |
}); | |
pageWrapper.addEventListener('click', event => { | |
if (sidebarBox.classList.contains('active')) { | |
sidebarBtn.classList.remove('active'); | |
sidebarBox.classList.remove('active'); | |
} | |
}); | |
window.addEventListener('keydown', event => { | |
if (sidebarBox.classList.contains('active') && event.keyCode === 27) { | |
sidebarBtn.classList.remove('active'); | |
sidebarBox.classList.remove('active'); | |
} | |
}); |
$black: #343838; | |
$blue: #00DFFC; | |
$dullWhite: #f6f6f6; | |
$easing: cubic-bezier(.6, .05, .28, .91); | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
background-color: $black; | |
font-size: 16px; | |
} | |
#page-wrapper { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
#title { | |
color: $dullWhite; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
font-size: 2em; | |
} | |
#btn { | |
position: fixed; | |
z-index: 5; | |
top: 15px; | |
left: 15px; | |
cursor: pointer; | |
transition: left 500ms $easing; | |
div { | |
width: 35px; | |
height: 2px; | |
margin-bottom: 8px; | |
background-color: $blue; | |
transition: transform 500ms $easing, opacity 500ms, background-color 250ms; | |
} | |
} | |
#btn.active { | |
left: 230px; | |
div { | |
background-color: $black; | |
} | |
#top { | |
transform: translateY(10px) rotate(-135deg); | |
} | |
#middle { | |
opacity: 0; | |
/* transform: rotate(135deg); */ | |
} | |
#bottom { | |
transform: translateY(-10px) rotate(-45deg); | |
} | |
} | |
#box { | |
position: fixed; | |
z-index: 4; | |
overflow: auto; | |
top: 0px; | |
left: -275px; | |
width: 275px; | |
opacity: 0; | |
padding: 20px 0px; | |
height: 100%; | |
background-color: $dullWhite; | |
color: $black; | |
transition: all 350ms $easing; | |
} | |
#box.active { | |
left: 0px; | |
opacity: 1; | |
} | |
#items { | |
position: relative; | |
top: 50%; | |
transform: translateY(-50%); | |
.item { | |
position: relative; | |
cursor: pointer; | |
font-size: 2em; | |
padding: 15px 30px; | |
transition: all 250ms; | |
&:hover { | |
padding: 15px 45px; | |
background-color: transparentize($black, .8); | |
} | |
} | |
} | |