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个国家和地区的人们捧着手机、电脑，在阿里、京东、抖音、拼多多等…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...