50 天学习 50 个项目 - HTMLCSS and JavaScript

day45-Netflix Mobile Navigation（左边侧边栏动态导航）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Netflix Mobile Navigation</title>
</head>

<body>
    <!-- 字体图标，点击侧边导航显示 -->
    <button class="nav-btn open-btn">
        <i class="fas fa-bars"></i>
    </button>
    <!-- logo -->
    <img src="https://source.unsplash.com/random" alt="Logo" class="logo">
    <!-- 文本 -->
    <p class="text">手机导航</p>
    <!-- 左部侧边导航 默认隐藏 -->
    <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>
                <!-- logo -->
                <img src="https://source.unsplash.com/random" alt="Logo" class="logo">
                <!-- 导航列表 -->
                <ul class="list">
                    <li><a href="#">团队</a></li>
                    <li><a href="#">位置</a></li>
                    <li><a href="#">Netflix的生活</a></li>
                    <li>
                        <ul>
                            <li><a href="#">Netflix文化备忘录</a></li>
                            <li><a href="#">工作与生活的平衡</a></li>
                            <li><a href="#">包容性与多样性</a></li>
                            <li><a href="#">博客</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Muli', sans-serif;
    /* 子元素竖直居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}


.logo {
    width: 150px;
}

/* 点击按钮 */
.nav-btn {
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 20px;
}

/* 打开按钮 固定定位 */
.open-btn {
    position: fixed;
    top: 10px;
    left: 10px;
}

/* 导航 固定定位 */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    /* 通过移动隐藏 三层导航*/
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

/* visible 不隐藏 通过js控制 */
.nav.visible {
    transform: translateX(0);
}

/* 第一层背景 */
.nav-black {
    background-color: rgb(71, 209, 117);
    max-width: 480px;
    min-width: 320px;
    transition-delay: 0.4s;
}

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

/* 第二层背景 */
.nav-red {
    background-color: rgb(9, 181, 229);
    width: 95%;
    transition-delay: 0.2s;
}

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

/* 第三层背景 */
.nav-white {
    background-color: #fff;
    width: 95%;
    padding: 40px;
    position: relative;
    transition-delay: 0s;
}

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

/* 关闭按钮 */
.close-btn {
    opacity: 0.3;
    position: absolute;
    top: 40px;
    right: 30px;
}

/* 导航列表 */
.list {
    list-style-type: none;
    padding: 0;
}

.list li {
    margin: 20px 0;
}

.list li a {
    color: rgb(34, 31, 31);
    font-size: 14px;
    text-decoration: none;
}

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

script.js

// 重点 flex position fixed transform transition transition-delay 通过延迟过渡展示动态效果
// 1.获取元素节点
const open_btn = document.querySelector('.open-btn')//打开按钮
const close_btn = document.querySelector('.close-btn')//关闭按钮
const nav = document.querySelectorAll('.nav')//三层导航
// 2.绑定事件 打开
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'))
})