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>&…...
2.FastRunner定时任务Celery+RabbitMQ
注意：celery版本和Python冲突问题 不能用高版本Python 用3.5以下，因为项目的celery用的django-celery 3.2.2 python3.7 async关键字 冲突版本 celery3.x方案一： celery3.xpython3.6方案二 ： celery4.xpython3.7 解决celery执…...
vb.net 实时监控双门双向门禁控制板源代码
本示例使用设备介绍：实时网络双门双向门禁控制板可二次编程控制网络继电器远程开关-淘宝网 (taobao.com) Imports System.Net.Sockets Imports System.Net Imports System.Text Imports System.ThreadingImports System.Net.NetworkInformation Imports System.Man…...
文具办公产品展示预约小程序的作用如何
从整体来看，文具办公品牌/门店的生意来源于线下自然流量或线上自营商城/入驻第三方商城的的流量，线上多数情况都是以直接销售配送为主，但其实对文具品牌/门店而言还有信息展示、服务预约、在线咨询、产品介绍等需求。 虽然小区周边的消费者需…...
渗透测试流程是什么？7个步骤给你讲清楚！
在学习渗透测试之初，有必要先系统了解一下它的流程，静下心来阅读一下，树立一个全局观，一步一步去建设并完善自己的专业领域，最终实现从懵逼到牛逼的华丽转变。渗透测试是通过模拟恶意黑客的攻击方法，同时也…...
如何解决网站被攻击的问题：企业网络攻防的关键路径
在当今数字化时代，企业面临着不断升级的网络威胁，网站遭受攻击的风险也与日俱增。解决网站被攻击的问题对企业发展至关重要，不仅关系到企业的信息安全，也直接影响到企业的声誉和利益。从企业发展的角度出发，我们将探讨…...
大健康产业的先行者「完美公司」携手企企通，推进企业采购供应链数字化进程
随着中国经济持续向好，消费升级和美妆步骤增加，美妆和个人护理产品已逐渐成为中国消费者的日用消费品，推动了护肤品和化妆品的销售额增速均超过10%，成为中国整个快速消费品市场中的一颗亮眼明珠。 据国家统计局数据显示࿰…...
在windows Server安装Let‘s Encrypt的SSL证书
1、到官网（https://certbot.eff.org/instructions?wswebproduct&oswindows）下载 certbot客户端。 2、安装客户端（全部默认安装即可） 3、暂停IIS中的网站 开始菜单中找到并运行“Certbot”，输入指令： …...
)
GPT实战系列-P-Tuning本地化训练ChatGLM2等LLM模型，到底做了什么？(二)
GPT实战系列-如何使用P-Tuning本地化训练ChatGLM2等LLM模型？(二) 文章目录 GPT实战系列-1.训练参数配置传递2.训练前准备3.训练参数配置4.训练对象，seq2seq训练5.执行训练6.训练模型评估依赖数据集的预处理 P-Tuning v2 将 ChatGLM2-6B 模型需要微调的参…...
Python3.7+PyQt5 pyuic5将.ui文件转换为.py文件、Python读取配置文件、生成日志
1.实际开发项目时，是使用Qt Designer来设计UI界面，得到一个.ui的文件，然后利用PyQt5安装时自带的工具pyuic5将.ui文件转换为.py文件： pyuic5 -o mywindow.py mywindow.ui #先是py文件名，再是ui文件名样式图 QT5 UI&am…...
使用 VPN ，一定要知道的几个真相！
你们好，我的网工朋友。 今天想和你聊聊VPN。在VPN出现之前，企业分支之间的数据传输只能依靠现有物理网络（例如Internet）。 但由于Internet中存在多种不安全因素，报文容易被网络中的黑客窃取或篡改，最终造…...
数电实验-----实现74LS153芯片扩展为8选1时间选择器以及应用（Quartus II ）
目录 一、74LS153芯片介绍 管脚图 功能表 二、4选1选择器扩展为8选1选择器 1.扩展原理 2.电路图连接（Quartus II ） 3.仿真结果 三、8选1选择器的应用 1.三变量表决器 2.奇偶校验电路 一、74LS153芯片介绍 74ls153芯片是属于四选一选择器的芯片。…...
如何实现MATLAB与Simulink的数据交互
参考链接：如何实现MATLAB与Simulink的数据交互 MATLAB是一款强大的数学计算软件，Simulink则是一种基于模型的多域仿真平台，常用于工程和科学领域中的系统设计、控制设计和信号处理等方面。MATLAB和Simulink都是MathWorks公司的产品࿰…...
【数据结构】归并排序
👦个人主页：Weraphael ✍🏻作者简介：目前正在学习c和算法 ✈️专栏：数据结构 🐋 希望大家多多支持，咱一起进步！😁 如果文章有啥瑕疵 希望大佬指点一二 如果文章对你…...
数字引领，智慧赋能｜袋鼠云与易知微共同亮相2023智慧港口大会
2023年10月19日，由中国港口协会、中国交通通信信息中心、天津港（集团）有限公司主办，中国港口协会智慧港口专业委员会、《港口科技》杂志社等单位承办的以“数字引领 智慧赋能”为主题的“2023智慧港口大会”在天津顺利召开。 袋鼠…...
星火模型（Spark）的langchain 实现
星火模型的langchain实现 测试已通过，希望有所帮助。 使用前请先安装环境： pip install githttps://github.com/shell-nlp/spark-ai-python.git注意： 一定要使用上面方式安装spark库，因对官方的库做了改动。官方的库已经长时间不…...
python运算符重载之构造函数和迭代器
1 python运算符重载之构造函数和迭代器 python运算符重载是在类方法中拦截内置操作-当类的实例使用内置操作时，pytho自动调用对应方法，并且返回操作结果。 NO#描述1拦截运算运算符重载拦截内置操作，比如打印、函数调用、点号运算、表达式运…...
【数据处理】Python：实现求条件分布函数 | 求平均值方差和协方差 | 求函数函数期望值的函数 | 概率论
猛戳订阅！ 👉 《一起玩蛇》🐍 💭 写在前面：本章我们将通过 Python 手动实现条件分布函数的计算，实现求平均值，方差和协方差函数，实现求函数期望值的函数。部署的测试代码放到文后了，运行所需环境 python version >= 3.6，numpy >= 1.15，nltk >= 3.4，tqd…...
new/delete 和malloc/free的区别
C中： 创建单个数据空间： char *ch new char; delete ch; ch NULL; 创建多个数据空间： char *ch new char[4]; delete [] ch; ch NULL; C语言中： 创建单个数据空间： char *ch malloc(sizeof(char)); fre…...
Linux程序设计(上)
系列文章目录 文章目录 系列文章目录前言一、unix, linux, GNU, POSIXLinux程序 二、shellshell语法1.变量2.语句 函数命令命令的执行dialog工具-- 三、文件操作1. Linux 文件结构2. 系统调用和设备驱动程序3. 库函数4. 底层文件访问5. 标准I/O库6.格式化输入输出7. 文件和目录…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
stm32G473的flash模式是单bank还是双bank？
今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
MySQL 8.0 OCP 英文题库解析（十三）
Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人，点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置，详见说明文档 成功后，记录Webhook 2 API文档说明 点击设置说明 查看自…...