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个国家和地区的人们捧着手机、电脑，在阿里、京东、抖音、拼多多等…...
Peroxidase-conjugated AffiniPure Goat Anti-Human IgG：高酶活，低背景，精准定量人源抗体
在现代生命科学研究中，抗体是实现特定分子识别和信号检测的核心工具。其中，二抗作为连接一抗与检测系统的重要桥梁，其特异性和灵敏度直接影响实验结果的准确性与可靠性。Peroxidase-conjugated AffiniPure Goat Anti-Human IgG, Fcγ Fragmen…...
终极指南：CleanArchitecture项目Angular 17快速升级实战与最佳实践
终极指南：CleanArchitecture项目Angular 17快速升级实战与最佳实践 【免费下载链接】CleanArchitecture Clean Architecture Solution Template for ASP.NET Core 项目地址: https://gitcode.com/GitHub_Trending/cle/CleanArchitecture 如果你正在使用Clean…...
图的存储方式详解（邻接矩阵 + 邻接表）| 算法入门必看
在算法学习中，图是仅次于树的核心数据结构，广泛应用于路径规划、网络拓扑、社交关系等场景。而图的存储是后续图论算法（DFS、BFS、最短路等）的基础——选择合适的存储方式，能直接影响算法的时间和空间效率。 本文将详细讲解图的两种最常用存储方式：邻接矩阵和邻接表，从…...
STM32CubeMX项目实战：从新建工程到驱动LED，一步步教你玩转HAL库（附代码解析）
STM32CubeMX实战指南：HAL库驱动LED的底层逻辑与工程化思维 第一次打开STM32CubeMX时，那种面对密密麻麻的配置选项却不知从何下手的焦虑感，相信每位嵌入式开发者都记忆犹新。不同于传统寄存器操作的直白，HAL库和图形化配置工具带来…...
RWKV7-1.5B-G1A多模态应用初探：从文本到简单图表描述生成
RWKV7-1.5B-G1A多模态应用初探：从文本到简单图表描述生成 1. 开篇：当语言模型遇见数据可视化 最近在测试RWKV7-1.5B-G1A模型时，我发现一个有趣的现象——这个原本设计用于文本处理的模型，居然能通过巧妙的Prompt设计，…...
零基础入门AI集成：在快马平台编写你的第一个豆包AI对话程序
零基础入门AI集成：在快马平台编写你的第一个豆包AI对话程序 作为一个刚接触AI开发的新手，第一次看到豆包开放平台的API文档时，我完全被各种参数和术语搞晕了。好在发现了InsCode(快马)平台，它让我不用从零开始写代码就能理解整个…...
静态图编译加速失效？分布式梯度同步卡顿？PyTorch 3.0面试官最想听的3层归因逻辑，现在不看明年校招就晚了
第一章：PyTorch 3.0 静态图分布式训练面试概览PyTorch 3.0 并非官方发布的正式版本（截至2024年，PyTorch最新稳定版为2.3），但“PyTorch 3.0”在技术面试语境中常作为考察候选人对**静态图编译、分布式训练前沿演进与系统…...
Qwen All-in-One场景解析：如何用轻量模型赋能边缘计算应用
Qwen All-in-One场景解析：如何用轻量模型赋能边缘计算应用 1. 引言：当边缘计算遇上大模型 想象一下，在一个智能工厂的质检工位上，摄像头捕捉到产品表面的微小瑕疵。传统的做法是：将图像上传到云端服务器，…...
3分钟净化微信社交圈：WechatRealFriends让200+好友检测效率提升99%的秘密
3分钟净化微信社交圈：WechatRealFriends让200好友检测效率提升99%的秘密 【免费下载链接】WechatRealFriends 微信好友关系一键检测，基于微信ipad协议，看看有没有朋友偷偷删掉或者拉黑你 项目地址: https://gitcode.com/gh_mirrors/we/Wech…...
Unity物理游戏开发：如何用FixedTimestep优化不同设备的性能表现
Unity物理游戏开发：动态调整FixedTimestep实现跨设备性能优化 移动端游戏开发者常面临一个核心矛盾：物理模拟精度与设备性能的平衡。当你的游戏在高端设备上流畅运行，却在低端机型出现卡顿时，问题往往出在Fixed Timestep的静态配置…...