Author: | Long |
---|---|
Views Total: | 2,687 views |
Official Page: | Go to website |
Last Update: | March 8, 2018 |
License: | MIT |
Preview:

Description:
A fancy sidebar off-canvas navigation menu that appears with an elastic animation effect based on CSS3 and a little bit of JavaScript.
How to use it:
Create the sidebar navigation.
<div id="nav" class="navigation"> <div class="navigation__inner"> <!-- Navigation Content Here --> </div> </div>
Create a trigger button to open/close the sidebar navigation.
<button id="show">Toggle Menu</button>
The primary CSS/CSS3 styles.
.navigation { position: fixed; width: 300px; height: 100%; top: 0; overflow-y: auto; overflow-x: hidden; opacity: 0; visibility: hidden; z-index: 99; -webkit-transition-delay: 300ms; transition-delay: 300ms; left: 0; } .navigation.active { opacity: 1; visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s; } .navigation.active .navigation__inner { background-color: #7c7fe0; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: background-color 0s linear 599ms, -webkit-transform 300ms linear; transition: background-color 0s linear 599ms, -webkit-transform 300ms linear; transition: transform 300ms linear, background-color 0s linear 599ms; transition: transform 300ms linear, background-color 0s linear 599ms, -webkit-transform 300ms linear; } .navigation.active .navigation__inner:after { width: 300%; border-radius: 50%; -webkit-animation: elastic 150ms ease 300.5ms both; animation: elastic 150ms ease 300.5ms both; } .navigation__inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 999999; -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: background-color 0s linear 300ms, -webkit-transform 300ms linear; transition: background-color 0s linear 300ms, -webkit-transform 300ms linear; transition: transform 300ms linear, background-color 0s linear 300ms; transition: transform 300ms linear, background-color 0s linear 300ms, -webkit-transform 300ms linear; } .navigation__inner:after { content: ''; position: absolute; width: 0; height: 100%; top: 0; right: 0; background-color: #7c7fe0; border-radius: 50%; z-index: -1; -webkit-transition: all 300ms linear; transition: all 300ms linear; }
Create the elastic effect in the CSS3 keyframes.
@-webkit-keyframes elastic { 0% { border-radius: 50%; } 45% { border-radius: 0; } 65% { border-top-right-radius: 40px 50%; border-bottom-right-radius: 40px 50%; } 80% { border-radius: 0; } 90% { border-top-right-radius: 20px 50%; border-bottom-right-radius: 20px 50%; } 100% { border-radius: 0; } } @keyframes elastic { 0% { border-radius: 50%; } 45% { border-radius: 0; } 65% { border-top-right-radius: 40px 50%; border-bottom-right-radius: 40px 50%; } 80% { border-radius: 0; } 90% { border-top-right-radius: 20px 50%; border-bottom-right-radius: 20px 50%; } 100% { border-radius: 0; } }
Use plain JavaScript to toggle CSS classes depending on the current status.
var btn = document.getElementById('show'); var nav = document.getElementById('nav'); btn.addEventListener('click', function() { nav.classList.toggle('active'); });