html-网站菜单-点击显示导航栏
一、效果图
1.点击显示菜单栏，点击x号关闭；
2.点击一级菜单，展开显示二级，并且加号变为减号；
3.点击其他一级导航，自动收起展开的导航。
二、代码实现
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="zh-CN" /><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="format-detection" content="telephone=no" /><meta name="Keywords" content="" /><meta name="Description" content="" /><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><title></title><script src="static/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script><style>.header {position: relative;height: 100px;padding: 30px;box-sizing: border-box;}.header .header-right {position: relative;float: right;}.header .l-toggle {float: left;width: 38px;height: 20px;cursor: pointer;z-index: 99;position: relative;}.header .l-toggle span {position: absolute;top: 0;right: 0;left: 0;display: block;width: 26px;height: 2px;background-color: #000;}.header .l-toggle .line1 {margin: 0 auto;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);-webkit-transition: margin .3s .5s ease, -webkit-transform .5s ease;transition: margin .3s .5s ease, transform .5s ease;}.header .l-toggle .line2 {margin: 8px auto 0;}.header .l-toggle .line3 {margin: 16px auto auto;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);-webkit-transition: margin .3s .5s ease, -webkit-transform .5s ease;transition: margin .3s .5s ease, transform .5s ease;}.header .l-toggle.hover span {background: #828282;}.header .l-toggle.hover .line1 {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);margin: 8px auto 0;-webkit-transition: margin .3s ease, -webkit-transform .5s .3s ease;transition: margin .3s ease, transform .5s .3s ease;}.header .l-toggle.hover .line3 {-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);margin: 8px auto 0;-webkit-transition: margin .3s ease, -webkit-transform .5s .3s ease;transition: margin .3s ease, transform .5s .3s ease;}.header .sub-menu {width: 217px;height: auto;position: absolute;right: 30px;top: 20px;z-index: 2;background: rgba(255, 255, 255, 0.83);padding: 70px 24px 30px;box-sizing: border-box;display: none;border: 1px solid rgba(0, 0, 0, 0.2);}.header.active .line {height: 100vh;background: rgba(130, 130, 130, 0.3);}.header .sub-menu_ul {width: 100%;padding: 0;}.header .sub-menu_ul li {width: 100%;margin-bottom: 20px;font-family: Microsoft YaHei UI;position: relative;text-align: right;list-style: none;}.header .sub-menu_ul li .li_title {display: flex;align-items: center;justify-content: space-between;font-size: 18px;font-weight: bold;color: #ABABAB;/* color: #333333; */cursor: pointer;}.header .sub-menu_ul li .li_title span {color: #858585;font-size: 20px;display: none;}.header .sub-menu_ul li .li_title .spanAdd {display: block;}.menu_li_active .spanAdd {display: none !important;}.menu_li_active .spanSub {display: block !important;}.menu_li_active a {color: #333 !important;top: -7px !important;}.header .sub-menu_ul li .li_title a {position: absolute;right: 0;top: -14px;z-index: 999;font-size: 18px;font-weight: bold;color: #ABABAB;width: 66%;}.header .sub-menu_ul li a {width: 100%;display: block;font-size: 14px;font-weight: 400;color: #333333;margin-top: 15px;transition: 0.5s;text-decoration: none;}.header .sub-menu_ul li a:hover {text-decoration: underline;}.header .sub-menu_ul li .li_con {display: none;}</style></head><body><!-- 头部 --><header class="header"><div class="header-right"><div id="toggle" class="l-toggle"><span class="line1"></span><span class="line2"></span><span class="line3"></span></div></div><div class="sub-menu"><ul class="sub-menu_ul"><li><div class="li_title"><span class="spanAdd">+</span><span class="spanSub" style="font-size: 29px;">-</span><a href="aboutHongtian.html">走进鸿天</a></div><div class="li_con"><a href="aboutHongtian.html">关于鸿天</a><a href="aboutHistory.html">发展历程</a><a href="aboutCulture.html">企业文化</a><a href="aboutHonors.html">荣誉资质</a><a href="aboutBrand.html">企业品牌</a></div></li><li><div class="li_title"><span class="spanAdd">+</span><span class="spanSub" style="font-size: 29px;">-</span><a href="savingList.html">集团业务</a></div><div class="li_con"><a href="savingEnvirProtection.html">ODM供应链</a><a href="savingEnvirProtection.html">品牌零售</a></div></li><li><div class="li_title"><span class="spanAdd">+</span><span class="spanSub" style="font-size: 29px;">-</span><a href="savingList.html">技术研发</a></div><div class="li_con"><a href="savingEnvirProtection.html">研发中心</a><a href="savingEnvirProtection.html">印绣中心</a><a href="savingEnvirProtection.html">检测中心</a></div></li><li><div class="li_title"><span class="spanAdd">+</span><span class="spanSub" style="font-size: 29px;">-</span><a href="savingList.html">可持续发展</a></div><div class="li_con"><a href="savingEnvirProtection.html">节能环保</a><a href="savingEnvirProtection.html">慈善公益</a><a href="savingEnvirProtection.html">校企合作</a></div></li><li><div class="li_title"><span class="spanAdd">+</span><span class="spanSub" style="font-size: 29px;">-</span><a href="focusHongtian.html">聚焦鸿天</a></div><div class="li_con"><a href="focusHongtian.html">企业动态</a><a href="focusHongtian.html">品牌动态</a><a href="focusHongtian.html">鸿天人家</a><a href="focusHongtian.html">红色党建</a></div></li><script>$(function() {$('.sub-menu_ul li').click(function() {$(this).find('.li_con').slideToggle()$(this).siblings().find('.li_con').slideUp()if ($(this).hasClass('menu_li_active')) {$(this).removeClass('menu_li_active')} else {$(this).addClass('menu_li_active').siblings().removeClass('menu_li_active')}})})</script></ul></div></header><script>$(function() {$(".l-toggle").on('click', function() {var _this = $(this);if (!$(this).hasClass('hover')) {$(this).addClass('hover');$(this).children('.line2').stop(true, true).fadeOut(300);$(this).parents(".header-right").siblings('.sub-menu').stop().fadeIn();} else {$(this).removeClass('hover');$(".header").removeClass("active");$(this).children('.line2').stop(true, true).fadeIn(300);$(this).parents(".header-right").siblings('.sub-menu').stop().fadeOut();}});})</script></body>
</html>
完成~
相关文章：
html-网站菜单-点击显示导航栏
一、效果图 1.点击显示菜单栏，点击x号关闭； 2.点击一级菜单，展开显示二级，并且加号变为减号； 3.点击其他一级导航，自动收起展开的导航。 二、代码实现 <!DOCTYPE html> <html><head>&…...
【C++函数的进化】函数指针，模板，仿函数，lambda表达式
/*** poject * author jUicE_g2R(qq:3406291309)* file C函数的进化* * language C* EDA Base on VS2022* editor Obsidian（黑曜石笔记软件）* * copyright 2023* COPYRIGHT 原创学习笔记：转载需获得博…...
云服务器windows service2022 部署git服务器
1 安装 下载地址gitblit 解压到你的一个目录,我这里给的是C:\gitblit 根据官网提示要下载jre or jdk7.0,这里建议使用下载jre (jdk 有时候运行出问题,或者2个都安装),自行安装java,这里不做环境配置的说明 进入c:\gitblit\data 目录里面找到,defaults.properties 文件,编辑主…...
Linux_Docker修改Docker Root Dir
今天遇到需求，要修改一下docker容器和镜像的存储位置，默认位置为/var/lib/docker目录下，要修改到/new/dockerFile目录下。 停止docker服务 sudo service docker stop 备份docker容器镜像 移动/var/lib/docker目录下的文件到/dockerFile目录…...
解决requests 2.28.x版本SSL错误：证书验证失败
1、问题背景 在使用requests 2.28.1版本时，我进行HTTP post传输报告负载时，由于SSL验证设置为True，请求失败，错误如下：(Caused by SSLError(SSLCertVerificationError(1, ‘[SSL: CERTIFICATE_VERIFY_FAILED] certifi…...
【开源】基于Vue.js的开放实验室管理系统的设计和实现
项目编号： S 013 ，文末获取源码。 \color{red}{项目编号：S013，文末获取源码。} 项目编号：S013，文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实…...
使用composer安装ffmpeg的步骤
以下是使用composer安装ffmpeg的步骤： 1.在laravel根目录下执行以下命令安装ffmpeg： composer require php-ffmpeg/php-ffmpeg 2.如果不指定版本号，则默认使用0.14版本。 3.执行以上命令后，composer会自动下载并安装ffmpeg。 …...
RT-DETR优化策略：轻量级Backbone改进 | 高效模型 (Efficient MOdel, EMO),现代倒残差移动模块设计|ICCV2023
🚀🚀🚀本文改进：面向移动端的轻量化网络模型——EMO，它能够以相对较低的参数和 FLOPs 超越了基于 CNN/Transformer 的 SOTA 模型，支持四个版本EMO_1M, EMO_2M, EMO_5M, EMO_6M，参数量如下，相对于自带的rtdetr-l、rtdetr-x有很大提升 layersparametersgradientsEMO_1…...
一些nginx命令
1.停止nginx nginx -s quit systemctl stop nginx.service 立即停止 nginx-s stop 杀死nginx进程 killall nginx 2.启动命令 nginx systemctl start nginx.service 3.查看nginx进程 ps aux | grep nginx 4.重启nginx服务 systemctl restart nginx.service 5.重载…...
WPF自定义控件介绍
在WPF中，自定义控件通常是指从头开始创建一个新控件或从现有控件继承并扩展其功能。自定义控件与用户控件（User Control）不同，用户控件是通过组合其他控件来构建的，而自定义控件通常涉及对控件的更底层的渲染和行为进行…...
JUNIT使用和注意、以及断言的介绍使用、SpringBoot Test测试类的使用、maven配置使用junit详细介绍
参考文章： https://www.cnblogs.com/zhukaile/p/14514238.html，https://blog.csdn.net/qq_36448800/article/details/126438339 一、什么是单元测试 在平时的开发当中，一个项目往往包含了大量的方法，可能有成千上万个。如何去保…...
强化学习在文生图中的应用：Training Diffusion Models with Reinforcement Learning
论文链接：Training Diffusion Models with Reinforcement Learning项目地址：Training Diffusion Models with Reinforcement Learning官方代码：https://github.com/kvablack/ddpo-pytorch/tree/maintrl实现：https://huggingface.co/docs/trl/ddpo_trainer🤗关注公众号 fu…...
【C语言】数组下标为啥从0开始？下标越界访问一定报错吗？
本篇文章目录 0. 相关文章1. 下标从0开始问题2. 数组下标越界不报错问题 0. 相关文章 指针与指针变量数组名不是首元素地址的的2个例外拨开指针和数组名之间的迷雾 1. 下标从0开始问题 原因是：数组下标访问本质是“指针解引用操作”，而指针又是地址&am…...
机器学习-搜索技术：从技术发展到应用实战的全面指南
在本文中，我们全面探讨了人工智能中搜索技术的发展，从基础算法如DFS和BFS，到高级搜索技术如CSP和优化问题的解决方案，进而探索了机器学习与搜索的融合，最后展望了未来的趋势和挑战，提供了对AI搜索技术深刻的…...
Axelar、J.P.Morgan Onyx、Apollo 完成概念验证，向跨区块链自动化投资领域探索
J.P.Morgan Onyx、Apollo、Axelar、Oasis Pro 以及 Provenance Block Chain 展开合作，共同进行互操作性概念验证（Proof-of-Concept，PoC)。 新加坡 — Axelar Inc.、Oasis Pro 、Provenance Blockchain 与 J.P.Morgan Onyx 以及 Apollo 通过新…...
wpf devexpress添加TreeListControl到项目
此教程示范如何添加TreeListControl到项目和绑定控件自引用数据源： 添加数据模型 绑定tree，并添加如下字段到数据源对象： Key字段包含唯一值索引节点 Parent字段包含父索引节点 添加数据模型（Employee和Staff类）到…...
WPF创建自定义控件编译通过但是找不到资源
报错： 原因: 路径写错了： 不是这样： Source"pack://application:,,,/Controls/Styles/xTabControl.xaml" 而是这样： Source"pack://application:,,,/项目名;component/Controls/Styles/xTabControl.xaml …...
PHP 中传值与传引用的区别,什么时候传值什么时候传引用？
传值：当使用传值的方式时，函数或方法会创建原始变量的一个副本，并将该副本传递给函数或方法。在函数或方法内部，对副本的任何修改都不会影响到原始变量。当函数或方法执行完毕后，副本被销毁，不再使用。 传引…...
es安装方式
es安装方式 1.下载镜像的方式 分词器 kibana和es和容器互通的方式 docker network create es-net开始拉去镜像的方式 docker pull kibana:7.12.1运行镜像的方式 docker run -d \--name es \-e "ES_JAVA_OPTS-Xms512m -Xmx512m" \-e "discovery.typesingle-…...
苍穹外卖项目笔记（2）
1 Nginx 反向代理和负载均衡 1.1 概念 【Tips】可以看到前端请求地址和后端接口地址并不匹配，这里涉及到 nginx 反向代理 ，就是将前端发送的动态请求由 nginx 转发到后端服务器 使用 nginx 作反向代理的好处： 提高访问速度（在请…...
hive更改表结构的时候报错
现象 FAILED: ParseException line 1:48 cannot recognize input near ADD COLUMN compete_company_id in alter table statement 23/11/14 17:59:27 ERROR org.apache.hadoop.hive.ql.Driver: FAILED: ParseException line 1:48 cannot recognize input near ADD COLUMN compe…...
redis运维(六)redis-cli命令
一 redis-cli 注意： redis-cli核redis-server版本必须适配 --> 见 redis-cli --version提示： 不过一般安装服务端 redis-server 时内置了客户端 redis-cli说明： redis-cli 是 redis 的一种命令行的客户端工具备注： redis-se…...
JDK1.8 新特性（二）【Stream 流】
前言 上节我们学了 lambda 表达式，很快我就在 Flink 的学习中用到了，我学的是 Java 版本的 Flink，一开始会以为代码会很复杂，但事实上 Flink 中很多地方都用到了 函数接口，这也让我们在编写 Flink 程序的时候可以使用 …...
阿里云CentOS主机开启ipv6
目录 一、云主机开启和使用 ipv6 1、网络和交换机开启 ipv6 2、创建 / 编辑云主机，开启ipv6 3、安全组放行ipv6端口 二、使用 ipv6 地址进行 ssh 连接 三、ipv6 地址绑定域名 一、云主机开启和使用 ipv6 1、网络和交换机开启 ipv6 进入网络、交换机详情页面…...
【Git】第五篇：基本操作（添加文件）
.git目录结构 我们在前文中提过了.git目录，也明确说了我们不能手动去.git目录下创建修改等任何操作。 添加文件 我们现在已经了解到，git是一个版本控制器，可以对我们的文件进行管理。而我们需要使用git管理文件的时候，我们必须将…...
vue通过span-method合并列之后，合并列显示在中间位置，根据鼠标滑动跟随展示
当vue通过span-method合并列之后，出现的合并列显示在中间位置，但是如果页面没有分页，如何进行展示呢，难道要滑到最下面去看吗，下面我们来根据鼠标滑动跟随展示 没有处理的合并页面 <template> <el-table:dat…...
gRPC 四模式之 一元RPC模式
一元RPC模式 一元 RPC 模式也被称为简单 RPC 模式。在该模式中，当客户端调用服务器端的远程方法时，客户端发送请求至服务器端并获得一个响应，与响应一起发送的还有状态细节以及 trailer 元数据（这部分不是默认发送的，…...
Java GUI实现贪吃蛇游戏
贪吃蛇是一款经典的游戏，玩法相对简单但富有挑战性。以下是贪吃蛇游戏的基本玩法说明： 目标：控制一条蛇，在游戏区域内吃到尽可能多的食物，使蛇身变长，同时避免撞到自己的身体或游戏区域的边界。 控制&…...
Vue3 使用教程
目录 一、创建vue3工程1. 使用vue-cli创建2.使用 vite 创建 二、setup使用三、ref函数四、reactive函数五、计算属性与监视属性5.1 computed函数5.2 watch函数5.3 watchEffect函数 六、自定义hook函数七、toRef函数八、shallowReactive 与 shallowRef九、readonly 与 shallowRe…...
卡方检验-python代码
故事背景 问题 卡方检验的结果怎么计算？ 方法 python代码 import numpy as np from scipy.stats import chi2_contingency# 观察频数矩阵 observed np.array([[47, 21, 17],[63, 29, 15],[11, 2, 4]])# 进行卡方检验 chi2, p, dof, expected chi2_contingency(o…...
电磁场与电磁波part4--时变电磁场
1、采用洛伦兹条件使得矢量位 与标量位 分离在两个独立的方程中，且矢量位 仅与电流密度 有关，而标量位 仅与电荷密度 有关。 2、电磁能量守恒定理（坡印廷定理） 即减少的电磁能量电磁场所做的功流出的电磁能量 3、设u(r,t)是…...
电压跟随器
电压跟随器即输入多大电压就输出多大的电压，那其起什么作用呢，直接用导线不行吗？ 下图为Multisim软件仿真结果，很明显输入电压6.5V输出电压使用万用表测得同为6.5V，验证了电压跟随器的作用。 在同相放大电路的基础上&a…...
元宇宙3D云展厅应用到汽车销售的方案及特点
为了紧紧抓住年轻消费者的需求，汽车销售行业也正在经历一场深刻的变革。在这个变革的前沿，元宇宙3D汽车展厅作为一项全新技术闪亮登场，打破了传统汽车销售模式的限制，为消费者带来了前所未有的购车体验。 元宇宙3D汽车展厅采用了尖…...
SourceTree修改Git密码
SourceTree用的好好的，无奈公司隔段时间强制更改电脑密码。更改完成后SourceTree无法使用，重新输入密码。VS的nuget也是。查资料虽然也能比较快的解决，但是。。。。在此转载记录下。 1. 找到 SourceTree 配置文件所在目录 ‘userhosts’ 目录…...
java中的深度复制和浅复制的BUG
刷题刷到LeetCode回溯DFS的算法题39题的时候,碰见一个Arraylist里面的bug,其中dfs函数里面的第一个if判断里面的语句 paths.add(path); path.clear();其中path是添加了path,但是添加之后path.clear(),导致原来添加到paths的path置为空数组,因为ArrayList的add只是把一个引用指…...
计算机毕业设计 基于SpringBoot的车辆网位置信息管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
博主介绍：✌从事软件开发10年之余，专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…...
集软件库、论坛、社区、工具箱、积分商城、会员体系、在线商城一体的后台系统+HBuilderX 前端软件社区
集软件库、论坛、社区、工具箱、积分商城、会员体系、在线商城等多个功能于一体的全面后台系统加上强大的HBuilderX前端软件社区，为用户提供了全面的应用开发和交流平台 企业猫提供了完善的后台搭建服务，通过该服务，用户可以方便地搭建出所需…...
【解决Qt编译报错:-1: warning: **.so, not found(try using -rpath or -rpath-link)】
[TOC](Qt调用opencv报错👎 warning: libopencv_flann.so.406, needed by **//libopencv_features2d.so, not found (try using -rpath or -rpath-link)) 最终提示使用-rpath，于是抱着试试看的方法改写.pro文件： QMAKE_LIBDIR_FLAGS -Wl,-r…...
关于数据mysql -＞maxwell-＞kafka的数据传输
个人名片： 🐅作者简介：一名大三在校生，热爱生活，爱好敲码！ \ 💅个人主页 🥇：holy-wangle ➡系列内容： 🖼️ tkinter前端窗口界面创建与优化 &…...
【linux】查看CPU的使用率
命令1：top top 总体系统信息 uptime：系统的运行时间和平均负载。tasks：当前运行的进程和线程数目。CPU：总体 CPU 使用率和各个核心的使用情况。内存（Memory）：总体内存使用情况、可用内存和缓存…...
【系统稳定性】1.6 黑屏（三）
五，QNX启动异常 qnx启动异常无疑同样是灾难级的存在。qnx是目前座舱方案中主流的存在，如果qnx存在异常会导致host或la或其他娱乐世界offline。那么导致qnx的原因有很多，相应地，我们也有很多的排查手段。 5.1 以太网连接 座舱方案中目前还是多域的设计，那么多域之间的连…...
《使用EasyExcel在Excel中增加序号列的方法》
《使用EasyExcel在Excel中增加序号列的方法》 1、简介2、正文3、核心代码4、使用方法5、效果 1、简介 在处理Excel文件时，有时候需要为表格增加序号列。本文介绍了如何使用Java代码实现在Excel中增加序号列的功能，并提供了一个示例代码。 2、正文 在处理…...
【Linux】安全审计-audit
文章目录 一、audit简介二、开启auditd服务三、相关文件四、审计规则五、审计日志查询及分析附录1：auditctl -h附录2：systemcall 类型 参考文章： 1、安全-linux audit审计使用入门 2、audit详细使用配置 3、Linux-有哪些常见的System Call&a…...
Linux 之查看标准错误码工具
目录 1. Linux 之查看标准错误码工具 1. Linux 之查看标准错误码工具 $ sudo apt install moreutils$ errno -l EPERM 1 不允许的操作 ENOENT 2 没有那个文件或目录 ESRCH 3 没有那个进程 EINTR 4 被中断的系统调用 EIO 5 输入/输出错误 ENXIO 6 没有那个设备或地址 E2BIG 7 参…...
Git企业开发级讲解（五）
📘北尘_：个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上，不忘来时的初心 文章目录 一、bug 分⽀二、删除临时分支三、小结 一、bug 分⽀ 假如我们现在正在 dev2 分⽀上进⾏开发…...
目录自动清洗
文章目录 前言一、需求分析二、操作步骤详解（标准章节）1. 提取文章目录2. 更改保存目录.txt3. 二级标题前面加4个空格4. 在章字和节字后面添加一个空格5. 在页码前面加上>符号6. 代码完全体 三、进阶一（有章无节小数二级标题）1…...
c++实现Any类，让一个类型指向其他任意类型
在c中，对于以上任务，容易想到的是一个基类类型指向其所有派生类。因此设计一个Any类，其里面有一个成员基类Base类，其派生类可以是数据date，但是你不知道date到底是什么东西，所以需要使用模版。所以其结构为…...
os.path.join函数用法
os.path.join()是Python中用于拼接文件路径的函数，它可以将多个字符串拼接成一个路径，并且会根据操作系统的规则自动使用合适的路径分隔符。 注：Linux用的是/分隔符，而Windows才用的是\。 该函数属于os.path模块，因此在…...
vscode Prettier配置
常用配置项： .prettierrc.json 是 Prettier 格式化工具的配置文件 {"printWidth": 200, // 指定行的最大长度"tabWidth": 2, // 指定缩进的空格数"useTabs": false, // 是否使用制表符进行缩进，默认为 false"singl…...
MLC-LLM 支持RWKV-5推理以及对RWKV-5的一些思考
自从2023年3月左右，chatgpt火热起来之后，我把关注的一些知乎帖子都记录到了这个markdown里面，：https://github.com/BBuf/how-to-optim-algorithm-in-cuda/tree/master/large-language-model-note ，从2023年3月左右到现…...