Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created March 17, 2017 01:06
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save CodeMyUI/12f3103a16ad9753a2780ff4b0f42cca to your computer and use it in GitHub Desktop.
Sidebar Interaction
<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);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment