Author: | eisenfox |
---|---|
Views Total: | 4,733 views |
Official Page: | Go to website |
Last Update: | March 20, 2019 |
License: | MIT |
Preview:

Description:
A project contains 5 off-canvas hamburger navigation variations from which you can choose to bring the native app navigation experience to your webpage.
What’s included:
- Variation 1: Push the main content with a parallax effect.
- Variation 2: Shrinks the main content.
- Variation 3: Shrinks the main content in a 3D space.
- Variation 4: Push the main content to the right.
- Variation 5: Animates the navigation when toggled.
How to use it:
Create the html for the navigation & main content.
<div class="page"> <!--navigation--> <nav class="nav"> <!--close button--> <div class="nav__close"></div> <!--navigation list--> <ul class="nav__list"> <!--navigation item--> <li class="nav__item"> <!--navigation link--><a class="nav__link" href="#" title="Home">Home</a> </li> <!--navigation item--> <li class="nav__item"> <!--navigation link--><a class="nav__link" href="#" title="About">About</a> </li> <!--navigation item--> <li class="nav__item"> <!--navigation link--><a class="nav__link" href="#" title="Contact">Contact</a> </li> </ul> </nav> <!--content part--> <div class="page__content"> <!--open navigation button--> <div class="nav-open-btn"> <div class="nav-open-btn__bar"></div> <div class="nav-open-btn__bar"></div> <div class="nav-open-btn__bar"></div> </div> <!--content block--> <div class="content"> Main Content Here </div> </div> </div>
The primary CSS/CSS3 styles.
html, body { margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; } .page, .page__content { position: relative; } .page { min-height: 100vh; -webkit-perspective: 1500px; perspective: 1500px; background-color: rgba(28, 28, 28, 0.5); } .page__content { min-height: 100vh; background-color: #fff; } /* navigation styles */ .nav { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; padding: 30px; box-sizing: border-box; background-color: #1c1c1c; box-shadow: 4px 0 5px 0 rgba(0, 0, 0, 0.14), 1px 0 10px 0 rgba(0, 0, 0, 0.12), 2px 0 4px -1px rgba(0, 0, 0, 0.3); z-index: 500; } /* nav list styles */ .nav__list { position: relative; padding: 0; margin: 45px 0 0 0; list-style-type: none; } /* nav item styles */ .nav__item:not(:last-child) { margin-bottom: 20px; } /* nav link styles */ .nav__link { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; display: inline-flex; align-items: center; color: #fff; text-decoration: none; } .nav__link:hover { color: #4caf50; } /* nav link icon styles */ .nav__link-icon { position: relative; top: -3px; /* !!!use only with material design icons */ margin-right: 10px; color: currentColor; } /* close icon styles */ .nav__close { position: absolute; top: 30px; right: 30px; width: 40px; height: 25px; cursor: pointer; /* close icon elements */ /* hover effect */ } .nav__close:before, .nav__close:after { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; display: block; width: 4px; height: 28px; border-radius: 10px; content: ''; -webkit-transform-origin: center center; transform-origin: center center; background-color: #fff; } .nav__close:before { position: absolute; top: 0; left: 18px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .nav__close:after { position: absolute; top: 0; right: 18px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .nav__close:hover:before, .nav__close:hover:after { background-color: #4caf50; } /* nav open btn styles */ .nav-open-btn { position: absolute; top: 30px; left: 30px; transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; width: 35px; height: 25px; overflow: hidden; cursor: pointer; } .nav-open-btn.js-hidden { transition-property: all; transition-duration: 0s; transition-timing-function: linear; transition-delay: 0s; opacity: 0; visibility: hidden; } .nav-open-btn__bar { width: 100%; height: 5px; background-color: #1c1c1c; border-radius: 20px; } .nav-open-btn__bar:nth-child(1) { position: absolute; top: 0; left: 0; } .nav-open-btn__bar:nth-child(2) { position: absolute; top: 10px; left: 0; } .nav-open-btn__bar:nth-child(3) { position: absolute; top: 20px; left: 0; }
The CSS for the navigation variations.
/* Demo #1: styles */ .nav--offcanvas-1 { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; left: -300px; /* opened styles */ } .nav--offcanvas-1.js-opened { left: 0; } .page__content--offcanvas-1 { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; left: 0; /* opened styles */ } .page__content--offcanvas-1.js-opened { transition-property: all; transition-duration: 0.3s; transition-timing-function: linear; transition-delay: 0s; left: 300px; } /* Demo #2: styles */ .nav--offcanvas-2 { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; left: -300px; /* opened styles */ } .nav--offcanvas-2.js-opened { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; left: 0; } .page__content--offcanvas-2 { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } .page__content--offcanvas-2.js-opened { -webkit-transform: scale(0.8) translateX(150px); transform: scale(0.8) translateX(150px); } /* Demo #3: styles */ .nav--offcanvas-3 { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; left: -300px; /* opened styles */ } .nav--offcanvas-3.js-opened { left: 0; } .page__content--offcanvas-3 { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; -webkit-transform: rotateY(0deg) translateX(0); transform: rotateY(0deg) translateX(0); } .page__content--offcanvas-3.js-opened { -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg); transform: translate3d(100px, 0, -600px) rotateY(-20deg); } /* Demo #4: styles */ .nav--offcanvas-4 { transition-property: all; transition-duration: 0s; transition-timing-function: linear; transition-delay: 0s; max-height: 80%; -webkit-transform: rotateY(-75deg) translateX(-50px); transform: rotateY(-75deg) translateX(-50px); -webkit-transform-origin: left center; transform-origin: left center; opacity: 0; visibility: hidden; /* opened styles */ } .nav--offcanvas-4.js-opened { max-height: 100%; transition: opacity .22s linear 0s, visibility .22s linear 0s, -webkit-transform .22s linear 0s; transition: transform .22s linear 0s, opacity .22s linear 0s, visibility .22s linear 0s; transition: transform .22s linear 0s, opacity .22s linear 0s, visibility .22s linear 0s, -webkit-transform .22s linear 0s; -webkit-transform: rotateY(0) translateX(0); transform: rotateY(0) translateX(0); -webkit-transform-origin: left center; transform-origin: left center; opacity: 1; visibility: visible; } .page__content--offcanvas-4 { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; left: 0; /* opened styles */ } .page__content--offcanvas-4.js-opened { left: 300px; } /* Demo #5: styles */ .nav--offcanvas-5 { width: 50%; opacity: 0; visibility: hidden; } .nav--offcanvas-5.js-opened { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; width: 300px; opacity: 1; visibility: visible; } .page__content--offcanvas-5 { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; left: 0; /* opened styles */ } .page__content--offcanvas-5.js-opened { left: 300px; }
The necessary JavaScript to enable the navigation.
// hide nav open btn when the nav is open, adding/removing open classes to nav and content var navOpenBtn = document.querySelector('.nav-open-btn'); var navCloseBtn = document.querySelector('.nav__close'); var nav = document.querySelector('.nav'); var pageContent = document.querySelector('.page__content'); var navList = document.querySelector('.nav__list'); var page = document.querySelector('.page'); // open nav navOpenBtn.addEventListener('click', function () { navOpenBtn.classList.add('js-hidden'); nav.classList.add('js-opened'); pageContent.classList.add('js-opened'); }); // close nav navCloseBtn.addEventListener('click', function () { navOpenBtn.classList.remove('js-hidden'); nav.classList.remove('js-opened'); pageContent.classList.remove('js-opened'); }); // close navigation if click outside it page.addEventListener('click', function (e) { var evTarget = e.target; if (evTarget !== nav && nav.classList.contains('js-opened') && evTarget !== navOpenBtn && evTarget.parentNode !== navOpenBtn) { console.log(navOpenBtn.firstChild); navOpenBtn.classList.remove('js-hidden'); nav.classList.remove('js-opened'); pageContent.classList.remove('js-opened'); } });