#9. Netflix Sidebar(原生JS版)

Netflix Sidebar(原生JS版)

效果说明

点击左上方的menu按钮(俗称汉堡排),然後Sidebar从侧边滑出。滑出的特殊效果会有三层不同颜色的,最里面那层是白底,置入选单文字。

实作逻辑

html(节录)

// 从外层到内层:nav-black > nav-red > nav-white
<div class="nav nav-black">
      <div class="nav nav-red">
        <div class="nav nav-white">
          <button class="nav-btn close-btn">
            <i class="fas fa-times"></i>
          </button>

          <img src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_Logo_2014-700x188.png" alt="Logo" class="logo">

          <ul class="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 balance</a></li>
                <li><a href="#">Inclusion & diversity</a></li>
                <li><a href="#">Blog</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

scss部分(节录)
主要运用transition-delay来控制不同属性延迟发生的时间,

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

  &.visible {
    transition-delay: 0s;
  }

  .nav-red {
    background-color: rgb(229, 9, 20);
    width: 95%;
    transition-delay: 0.2s;
  
    &.visible {
      transition-delay: 0.2s;
    }
    
    .nav-white {
      background-color: #fff;
      width: 95%;
      padding: 40px;
      position: relative;
      transition-delay: 0s;
    
      &.visible {
        transition-delay: 0.4s;
      }
      
      .close-btn {
        opacity: 0.3;
        position: absolute;
        top: 40px;
        right: 30px;
      }
      
      .list {
        list-style-type: none;
        padding: 0;
      
        li {
          list-style-type: none;
          padding-left: 20px;
          margin: 20px 0;
      
          a {
            color: rgb(34, 31, 31);
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
          }

          ul {
            list-style-type: none;
            padding-left: 20px;
          }

        }
      }
    }
  }
}

javascript部分
单纯用监听器add或remove .visible选择器

const open_btn = document.querySelector('.open-btn')
const close_btn = document.querySelector('.close-btn')
const nav = document.querySelectorAll('.nav')

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

明日任务

#10. Drag & Drop


<<:  Day 9. Hashicorp Nomad: Task dependencies

>>:  Amazon Linux 2 上解决跨来源资源共用 (CORS) 与开机自动启动 uwsgi - Day 09

连接的原理(基本概念、内连接与外连接)

为了方便理解先新增几个测试资料 mysql> create table t1 (m1 int,...

[D27] : 一个Queue+Docker在Local的实作(1/4)

没想到这周会炸忙 =皿= 这篇目的是想做到一个很简单的Docker和Message Queue实作...

Day29 NiFi 与其他工具的比较

这边我想特别写出这一篇的原因是当初我在学习与操作 NiFi 的过程中,我曾感到一些疑惑,会觉得感觉...

[影片]第27天:英雄指南-5. 新增应用内导航(2)

GitHub:https://github.com/dannypc1628/Angular-Tou...

6. STM32-NVIC USART

USART介绍 USART全名为通用同步/非同步收发传输器(universal synchronou...