day45-Netflix Mobile Navigation(左边侧边栏动态导航)

news2024/11/17 11:48:08

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/804273.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pinia在vue3中的使用

总结&#xff1a; 在store文件夹中建一个pinia的文件userStore.js 1.要想使用pinia必须先引入defineStore 这里我们使用es6的模块化语法导出的 import { defineStore } from pinia 2.然后使用export const useUserStore defineStore(user,{}) defineStore 方法有两个参数&…

NAT协议(网络地址转换协议)详解

NAT协议&#xff08;网络地址转换协议&#xff09;详解 为什么需要NATNAT的实现方式静态NAT动态NATNAPT NAT技术的优缺点优点缺点 NAT协议是将IP数据报头中的IP地址转换为另外一个IP地址的过程&#xff0c;主要用于实现私有网络访问公有网络的功能。这种通过使用少量的IP地址代…

机器视觉系统组成,你知道多少?

机器视觉系统是一个复杂而高效的技术体系&#xff0c;它的组成主要包括以下几个核心部件&#xff1a; 相机和镜头&#xff1a;相机是机器视觉系统的眼睛&#xff0c;用于捕捉被测物的图像。镜头是相机的重要组成部分&#xff0c;它可以调节焦距、光圈和通光量&#xff0c;帮助获…

第3章 配置与服务

1 CoreCms.Net.Configuration.AppSettingsHelper using Microsoft.Extensions.Configuration; using Microsoft.Extensions.Configuration.Json; namespace CoreCms.Net.Configuration { /// <summary> /// 【应用设置助手--类】 /// <remarks> /// 摘要&#x…

LLVM(2)IR入门

1 不支持类型的隐式转换 int factorial(int val);int factorial(int val) {if (val < 2)return 1;return factorial(val - 1) factorial(val - 2); }int main(int argc, char **argv) {return factorial(2) * 7 42; }生成IR代码 clang -emit-llvm -S t3.cpp -o t3.ll ;…

Android平台GB28181设备接入侧如何同时对外输出RTSP流?

技术背景 GB28181的应用场景非常广泛&#xff0c;如公共安全、交通管理、企业安全、教育、医疗等众多领域&#xff0c;细分场景可用于如执法记录仪、智能安全帽、智能监控、智慧零售、智慧教育、远程办公、明厨亮灶、智慧交通、智慧工地、雪亮工程、平安乡村、生产运输、车载终…

云原生架构

1. 何为云原生&#xff1f; 很多IT业内小伙伴会经常听到这个名词&#xff0c;那么什么是云原生呢&#xff1f;云原生是在云计算环境中构建、部署和管理现代应用程序的软件方法。 当今时代&#xff0c;众多企业希望构建高度可扩展、灵活且有弹性的应用程序&#xff0c;以便能够快…

Linux CentOS 8 编译安装Apache Subversion

前言 距离上一篇发表已经过去了5年零2个多月&#xff0c;这次重新开始写技术博客&#xff0c;理由和原来一样&#xff0c;也就是想把自己学习和工作中遇到的问题和知识记录下来&#xff0c;今天记录一下Linux CentOS 8通过编译安装svn的过程。 下载SVN 下载地址&#xff1a;…

使用frp中的xtcp映射穿透指定服务实现不依赖公网ip网速的内网穿透p2p

使用frp中的xtcp映射穿透指定服务实现不依赖公网ip网速的内网穿透p2p 管理员Ubuntu配置公网服务端frps配置service自启(可选) 配置内网服务端frpc配置service自启(可选) 使用者配置service自启(可选) 效果 通过frp实现内网client访问另外一个内网服务器 管理员 1&#xff09;…

PHP8的注释-PHP8知识详解

欢迎你来到PHP服务网&#xff0c;学习《PHP8知识详解》系列教程&#xff0c;本文学习的是《PHP8的注释》。 什么是注释&#xff1f; 注释是在程序代码中添加的文本&#xff0c;用于解释和说明代码的功能、逻辑或其他相关信息。注释通常不会被编译器或解释器处理&#xff0c;而…

深度学习实战44-Keras框架下实现高中数学题目的智能分类功能应用

大家好,我是微学AI ,今天给大家介绍一下深度学习实战44-Keras框架实现高中数学题目的智能分类功能应用,该功能是基于人工智能技术的创新应用,通过对数学题目进行智能分类,提供个性化的学习辅助和教学支持。该功能的实现可以通过以下步骤:首先,采集大量的高中数学题目数据…

Clion实现Stm32标准库-HAL库开发配置

1、配置CLion用于STM32开发&#xff08;基于hal库开发&#xff09; 原文链接 https://zhuanlan.zhihu.com/p/145801160 2、配置CLion用于STM32开发&#xff08;基于标准库开发&#xff09; 参考文章&#xff1a;https://www.bilibili.com/read/cv11442303

不再困扰!教你如何方便快捷地将文件转换成PDF格式!

大家都知道PDF是电脑中最常见且兼容性最好的一种文档文件格式&#xff0c;而这种格式的文件既能保留文档的原始布局&#xff0c;又能够方便阅读和打印。那么&#xff0c;当我们需要将其他格式的文件转换成PDF格式时应该如何处理呢&#xff1f;我们可以使用一款文档转换工具&…

【QT 网络云盘客户端】——获取用户文件列表信息

目录 1.获取用户文件列表信息分析 2.设置图标属性 3.向服务器获取文件的数量 4.向服务器获取文件信息列表 4.显示图标 1.获取用户文件列表信息分析 1.将QListWidget设置为图标模式 2. 当我们点击"按下载量升序","按下载量降序",“更新” 菜单选项 都会…

3、HAproxy高级配置

基于cookie的会话保持 在 HAProxy 中&#xff0c;可以通过使用 cookie 配置来实现基于 Cookie 的会话保持。cookie 配置用于配置与会话保持相关的选项&#xff0c;允许您定义要在HTTP响应中插入或重写的Cookie以及其他与Cookie会话保持相关的参数。 以下是一些常用的 cookie 配…

已解决 IDEA Maven 项目中 “Could not find artifact“ 问题的常见情况和解决方案

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

QT第四讲

思维导图 基于QT的网络聊天室 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer> //服务器类 #include<QTcpSocket> //客户端类 #include<QMessageBox> //对话框类 #include<QList…

Windows使用Notepad++编辑Linux服务器的文件

&#x1f680; Windows使用Notepad编辑Linux服务器的文件 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介…

<el-date-picker>组件选择开始时间,结束时间自动延长30min

背景&#xff1a;选择开始时间&#xff0c;结束时间自动增加30分钟&#xff0c;结束时间也可重新选择&#xff0c;如图&#xff1a; <el-form-item label"预约开始时间" prop"value1"><el-date-pickersize"large"v-model"ruleForm…

Vue2 第三节 数据代理和事件处理

1.Object.defineProperty 方法 2.数据代理 3.Vue中的数据代理 4.事件的基本使用 5.事件修饰符 6.键盘事件 一.Object.defineProperty 方法 &#xff08;1&#xff09;学习Object.defineProperty为下一节数据代理做准备 &#xff08;2&#xff09;更加高级的给对象添加属…