kandeeflossMarkup
<nav>
<!-- off-canvas navigation here -->
</nav>
<div class="viewport">
<!-- website content here -->
</div>CSS
nav {
bottom: 0;
left: -75%;
position: fixed;
top: 0;
width: 75%;
z-index: 101;
}
.offcanvas-on nav {
left: 0;
overflow-y: auto;
}
.offcanvas-on .viewport {
-webkit-transform: translateX(75%);
transform: translateX(75%);
}JavaScript
var body = document.querySelector('body'),
btn = document.querySelector('.offcanvas-switch');
btn.addEventListener('click', function() {
if(body.classList.contains('offcanvas-on')) {
body.style.overflow = 'visible';
} else {
setTimeout(function() { body.style.overflow = 'hidden'; }, 400);
}
setTimeout(function() { body.classList.toggle('offcanvas-on'); }, 10);
});