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个国家和地区的人们捧着手机、电脑，在阿里、京东、抖音、拼多多等…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1） にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために ＆ ように（３）そう（４）にする3、…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
leetcodeSQL解题：3564. 季节性销售分析
leetcodeSQL解题：3564. 季节性销售分析 题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
安卓基础（aar）
重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式（本地调用） SSE模式（远程调用） 4. 注册工具提…...
人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...