Netflix Style Off-canvas Navigation In JavaScript And CSS3

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') });
});