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

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