20231107-前端学习炫酷菜单效果和折叠侧边栏
炫酷菜单效果
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>炫酷菜单效果</title><script src="https://kit.fontawesome.com/d37465fc7c.js" crossorigin="anonymous"></script><style>* {margin: 0;padding: 0;font-family: sans-serif;list-style: none;text-decoration: none;}.middle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.menu {width: 300px;border-radius: 8px;overflow: hidden;}.item {border-top: 1px solid #2980b9;overflow: hidden;}.btn {display: block;padding: 16px 20px;background: #3498db;position: relative;color: white;}.btn::before {content: "";position: absolute;width: 14px;height: 14px;background: #3498db;left: 20px;bottom: -7px;transform: rotate(45deg);}.btn i {margin-right: 10px;}.smenu {background: #333;overflow: hidden;transition: max-height 0.3s;max-height: 0;}.smenu a {display: block;padding: 16px 26px;color: white;font-size: 14px;margin: 4px 0;position: relative;}.smenu a::before {content: "";position: absolute;width: 6px;height: 100%;background: #3498db;left: 0;top: 0;transition: 0.3s;opacity: 0;}.smenu a:hover::before {opacity: 1;}.item:target .smenu {max-height: 10em;}</style>
</head><body><div class="middle"><div class="menu"><li class="item" id="profile"><a href="#profile" class="btn"><i class="fa-solid fa-user"></i>Profile</a><div class="smenu"><a href="">Posts</a><a href="">Picture</a></div></li><li class="item" id="messages"><a href="#messages" class="btn"><i class="fa-solid fa-envelope"></i>Messages</a><div class="smenu"><a href="">new</a><a href="">Sent</a><a href="">Spam</a></div></li><li class="item" id="settings"><a href="#settings" class="btn"><i class="fa-solid fa-gear"></i>Settings</a><div class="smenu"><a href="">Password</a><a href="">Language</a></div></li><li class="item"><a href="" class="btn"><i class="fa-solid fa-right-from-bracket"></i>Logout</a></li></div></div>
</body></html>
折叠侧边栏
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>折叠侧边栏</title><script src="https://kit.fontawesome.com/d37465fc7c.js" crossorigin="anonymous"></script><style>* {margin: 0;padding: 0;}a {text-decoration: none;}li {list-style: none;}body {font-family: Arial, Helvetica, sans-serif;background-color: #f4f4f4;}.navbar {background-color: #3b5998;overflow: hidden;height: 63px;}.navbar a {float: left;display: block;color: #f2f2f2;text-align: center;font-size: 17px;padding: 14px 16px;}.navbar ul {margin: 8px 0 0 0;}.open-side i {padding-top: 18px;}.navbar a:hover {background-color: #ddd;color: #000;}.side-nav {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0;background-color: #111;opacity: 0.8;overflow-x: hidden;padding-top: 60px;transition: 0.5s;}.side-nav a {padding: 10px 10px 10px 30px;font-size: 22px;color: #ccc;display: block;transition: .3s;}.side-nav a:hover {color: orange;}.side-nav .btn-close {position: absolute;top: 0;right: 22px;font-size: 36px;}#content {transition: margin-left .5s;padding: 20px;}@media(max-width:568px) {.navbar ul {display: none;}}/* @media(min-width:568px) {.open-side {display: none;}} */</style>
</head><body><nav class="navbar"><span class="open-side"><a href="#" onclick="openSideMenu()"><i class="fa-solid fa-bars fa-2xl"></i></a></span><ul class="navbar-nav"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav><div id="side-menu" class="side-nav"><a href="#" class="btn-close" onclick="closeSideMenu()">×</a><a href="#">Home</a><a href="#">About</a><a href="#">Services</a><a href="#">Contact</a></div><div id="content"><h1>你好，世界！</h1></div><script>xySideMenu = document.getElementById("side-menu");xyContent = document.getElementById("content");function openSideMenu() {xySideMenu.style.width = "250px";xyContent.style.marginLeft = "250px";}function closeSideMenu() {xySideMenu.style.width = "0";xyContent.style.marginLeft = "0";}</script>
</body></html>
相关文章：
20231107-前端学习炫酷菜单效果和折叠侧边栏
炫酷菜单效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>炫酷菜单效果</title><…...
基于CLIP的图像分类、语义分割和目标检测
OpenAI CLIP模型是一个创造性的突破； 它以与文本相同的方式处理图像。 令人惊讶的是，如果进行大规模训练，效果非常好。 在线工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 3D…...
python爬虫（数据获取——selenium）
环境测试 from selenium import webdriverchromedriver_path r"C:\Program Files\Google\Chrome\Application\chromedriver.exe" driver webdriver.Chrome()url "https://www.xinpianchang.com/discover/article?fromnavigator" driver.get(url)drive…...
[wp]NewStarCTF 2023 WEEK5|WEB
前言:比赛是结束了，但我的学习还未结束，看看自己能复习几道题吧，第四周实在太难 Final 考点： ThinkPHP 5.0.23 RCE一句话木马上传SUID提权（find） 解题: 首先页面就给了ThinkPHP V5， 那无非考…...
未将对象引用设置到对象实例
环境 vs 2017 qt 5.13.0 qt-vs-addin 2.10 qt 项目打开的vs 2010 的项目 配置完成之后可以编译执行，但是新建qt 类提示 未将对象引用设置到对象实例 问题 插件的版本太高了使用低版本的，到qt 官网下载Index of /official_releases/vsaddin 下载q…...
网络的地址簿：Linux DNS服务的全面指南
1 dns 1.1 dns（域名解析服务）介绍 当访问 www.baidu.com 首先查询/etc/hosts，如果没有再去查询/etc/resolv.conf，还是没有就去查询域名服务器 关于客户端: /etc/resolv.conf ##dns指向文件 nameserver 172.25.254.20测试&…...
输电线路AR可视化巡检降低作业风险
随着现代工业的快速发展，各行业的一线技术工人要处理的问题越来越复杂，一些工作中棘手的问题迫切需要远端专家的协同处理。但远端专家赶来现场往往面临着专家差旅成本高、设备停机损失大、专业支持滞后、突发故障无法立即解决等痛点。传统的远程协助似乎…...
18. 四数之和
18. 四数之和 原题链接：完成情况：解题思路：参考代码：错误经验吸取 原题链接： 18. 四数之和 https://leetcode.cn/problems/4sum/description/ 完成情况： 解题思路： /** * //HashMap只能记录…...
排序：堆排序（未完待续）
文章目录 排序一、 排序的概念1.排序：2.稳定性：3.内部排序：4.外部排序： 二、插入排序1.直接插入排序 二、插入排序堆排序 排序 一、 排序的概念 1.排序： 一组数据按递增/递减排序 2.稳定性： 待排序的序列…...
小米智能电视投屏方法
小米智能电视也提供了投屏功能。 使用遥控器，在应用中找到它，点击进入。 小米电视支持windows笔记本，macbook笔记本，iphone手机，安卓手机投屏。 windows笔记本投屏 在投屏应用中找到windows投屏，选中开…...
保外就医罪犯收到指定医院《罪犯病情诊断书》及检测、检查报告等其他医疗文书后，应当在规定时限内提交（ ），或者受委托司法所审查。
需要查看详细试题题库及其参考答案的，请到（题-海-舟）里进行搜索查看。可搜试题题干或者搜索关键词，搜题的时候，先进行题目识别，能大大提高学习效率，感谢使用！ 保外就医罪犯收到指定…...
pytorh模型训练、测试
目录 1 导入数据集 2 使用tensorboard展示经过各个层的图片数据 3 完整的模型训练测试流程 使用Gpu训练的两种方式 使用tensorboard显示模型 模型训练测试 L1Loss函数 保存未训练模型或者已经训练完的模型 4 加载训练好的模型进行测试 1 导入数据集 import torch from torch.u…...
MySQL 8.0 Clone Plugin 详解
文章目录 前言1. 克隆插件安装2. 克隆插件的使用2.1 本地克隆2.2 远程克隆 3. 克隆任务监控4. 克隆插件实现4.1 Init 阶段4.2 File Copy4.3 Page Copy4.4 Redo Copy4.5 Done 5. 克隆插件的限制6. 克隆插件与 Xtrabackup 的异同7. 克隆插件相关参数 后记 前言 克隆插件…...
掌握未来技术趋势：深度学习与量子计算的融合
掌握未来技术趋势：深度学习与量子计算的融合 摘要：本博客将探讨深度学习与量子计算融合的未来趋势，分析这两大技术领域结合带来的潜力和挑战。通过具体案例和技术细节，我们将一睹这两大技术在人工智能、药物研发和金融科技等领域…...
京东数据分析：2023年9月京东笔记本电脑行业品牌销售排行榜
鲸参谋监测的京东平台9月份笔记本电脑市场销售数据已出炉！ 9月份，笔记本电脑市场整体销售下滑。鲸参谋数据显示，今年9月份，京东平台上笔记本电脑的销量将近59万，环比下滑约21%，同比下滑约40%；销…...
3 任务3 使用趋动云部署自己的stable-diffusion
使用趋动云部署自己的stable-diffusion 1 创建项目：2 初始化开发环境实例3 部署模型4 模型测试 1 创建项目： 1.进入趋动云用户工作台，选择：当前空间，请确保当前所在空间是注册时系统自动生成的空间。 a.非系统自动生成…...
C语言 memset
C语言memset函数详解_C 语言_脚本之家 (jb51.net) 注意是按照字节赋值的。int型变量，当赋值0时，是没有问题的，但是赋值1，却按照每个字节都赋值1，最终结果错误。 怎么解决呢？ 不能使用memset么࿱…...
Windows安装svn命令
1、svn命令下载地址 https://www.visualsvn.com/downloads/; 2、安装svn命令 3、测试svn命令是否安装成功...
vr航天探索科普展vr航天科普亲子嘉年华
随着生活水平的提高，人们的体验事物也在变多，学习方面也越来越多元化。现在我国的航天技术也在快速的发展，在宇宙太空中有我们的一席之位。航天大发展离不开每个航天人的努力。现在很多的人从娃娃做起，让他们更早的体验和了解外太…...
双11“万亿交易额”背后，浪潮信息助力银行扛住交易洪流
双十一，不仅是网络购物的狂欢，更是中国支付清算业务的大考。 举目望去，双十一的台前幕后可谓是“不一样的精彩”。一方面台前的主角是消费者，全球超200个国家和地区的人们捧着手机、电脑，在阿里、京东、抖音、拼多多等…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
九天毕昇深度学习平台 | 如何安装库？
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...