[miniProjects] 45_Netflix Navigation

45_Netflix Navigation

💻 주제 : 반응형 네비게이션

✨JS

open_btn.addEventListener('click', () => {
  nav.forEach(nav_el => nav_el.classList.add('visible'))
})

close_btn.addEventListener('click', () => {
  nav.forEach(nav_el => nav_el.classList.remove('visible'))
})

• nav 클래스를 가진 것에 visible 클래스 이름을 추가, 제거함으로써 네비게이션이 나타났다 사라짐.

✨CSS

.nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  /* 화면 밖으로 */
  transform: translateX(-100%);
  transition: transform .3s ease-in-out;
}

• 처음 화면에서 햄버거 바만 보여야 하기 때문에 x축으로 -100% 이동하면 화면에서 네비게이션이 안 보이게 됨.

/* 햄버거바 눌렀을 때 나타날 스타일 */
.nav.visible {
  transform: translateX(0);
}

.nav-black {
  background-color: rgb(34, 31, 31);
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  transition-delay: .4s;
}

.nav-black.visible {
  transition-delay: 0s;
}

.nav-red {
  background-color: rgb(229, 9, 20);
  width: 95%;
  transition-delay: .2s;
}

.nav-red.visible {
  transition-delay: .2s;
}

.nav-white {
  background-color: #fff;
  width: 95%;
  padding: 40px;
  position: relative;
  transition-delay: 0s;
}

.nav-white.visible {
  transition-delay: .4s;
}

• visible이 붙어있지 않을 때와 있을 때 delay를 설정하여 네비게이션이 더욱 극적인 효과를 줌.