Author: | Florin Pop |
---|---|
Views Total: | 2,098 views |
Official Page: | Go to website |
Last Update: | September 25, 2019 |
License: | MIT |
Preview:

Description:
A Netflix mobile app inspired off-canvas multi-level sidebar navigation implemented in CSS/CSS3 and a little bit of JavaScript.
How to use it:
The navigation requires Font Awesome Iconic Font.
<link rel="stylesheet" href="/path/to/font-awesome/VERSION/css/all.min.css" />
Build the HTML for the navigation.
<div class="netflix-nav netflix-nav-black"> <div class="netflix-nav netflix-nav-red"> <div class="netflix-nav netflix-nav-white"> <div class="netflix-nav-container"> <button class="netflix-nav-btn netflix-close-btn"><i class="fas fa-times"></i></button> <img class="netflix-logo" src="logo.png" alt="Netflix Logo" /> <ul class="netflix-list"> <li><a href="#">Teams</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Life at netflix</a></li> <li> <ul> <li><a href="#">Netflix culture memo</a></li> <li><a href="#">Work life philosophy</a></li> <li><a href="#">Inclusion & Diversity</a></li> <li><a href="#">Wearenetflix</a></li> <li><a href="#">Blog</a></li> </ul> </li> </ul> </div> </div> </div> </div>
Create a hamburger button to toggle the navigation.
<button class="netflix-nav-btn netflix-open-btn"> <i class="fas fa-bars"></i> </button>
The required CSS/CSS3 styles for the navigation & toggle button.
.netflix-nav-btn { border: 0; background: transparent; cursor: pointer; font-size: 20px; } .netflix-open-btn { position: fixed; top: 10px; left: 10px; } .netflix-nav { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform .3s ease-in-out .4s; } .netflix-nav.visible { transform: translateX(0); } .netflix-nav-black { background-color: rgb(34, 31, 31); width: 60%; max-width: 480px; min-width: 320px; } .netflix-nav-black.visible { transition-delay: 0s; } .netflix-nav-red { background-color: rgb(229, 9, 20); transition-delay: .2s; width: 95%; } .netflix-nav-red.visible { transition-delay: .2s; } .netflix-nav-white { background-color: #fff; padding: 40px; transition-delay: 0s; width: 95%; } .netflix-nav-white.visible { transition-delay: .4s; } .netflix-nav-container { position: relative; } .netflix-close-btn { opacity: 0.3; position: absolute; top: 10px; right: 0; } .netflix-logo { width: 150px; } .netflix-list { list-style-type: none; padding: 0; } .netflix-list li { margin: 20px 0; } .netflix-list li a { color: rgb(34, 31, 31); font-size: 14px; text-decoration: none; text-transform: uppercase; } .netflix-list ul { list-style-type: none; padding-left: 20px; }
The JavaScript to toggle CSS classes when the navigation is opened & closed.
const netflix_open_btn = document.querySelector('.netflix-open-btn'); const netflix_close_btn = document.querySelector('.netflix-close-btn'); const netflix_nav = document.querySelectorAll('.netflix-nav'); netflix_open_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') }); }); netflix_close_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') }); });