当前位置：首页 > news >正文

html实现好看的多种风格手风琴折叠菜单效果合集(附源码)

news 2026/3/31 21:46:26

文章目录

1.设计来源
- 1.1 风格1 -图文结合手风琴
- 1.2 风格2 - 纯图片手风琴
- 1.3 风格3 - 导航手风琴
- 1.4 风格4 - 双图手风琴
- 1.5 风格5 - 综合手风琴
- 1.6 风格6 - 简描手风琴
- 1.7 风格7 - 功能手风琴
- 1.8 风格8 - 全屏手风琴
- 1.9 风格9 - 全屏灵活手风琴
2.效果和源码
- 2.1 动态效果
- 2.2 源代码
源码下载
万套模板，程序开发，在线开发，在线沟通

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/142166577

html实现好看的多种风格手风琴折叠菜单效果合集(附源码)，html模板源码，手风琴效果源码，手风琴模板源码，内置九种风格的手风琴源码，适用于各种场合，内置代码，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。

1.设计来源

1.1 风格1 -图文结合手风琴

风格1 -图文结合手风琴，鼠标悬浮展开内容，内容可以是图文结合，也可以是纯文字或图片，可以自定义，支持扩展。

在这里插入图片描述

1.2 风格2 - 纯图片手风琴

风格2 - 纯图片手风琴，鼠标悬浮展开内容，内容数量可以自定义，目前是十四章图片，具体效果可以看视频演示。
风格1 -图文结合手风琴
在这里插入图片描述

1.3 风格3 - 导航手风琴

风格3 - 导航手风琴，鼠标点击，动画出现演示内容，演示的内容可以自己定义，图文结合，如果排版都很自由，具体效果可以看视频演示。

手风琴导航

在这里插入图片描述

单击导航动态弹出

在这里插入图片描述

1.4 风格4 - 双图手风琴

风格4 - 双图手风琴，鼠标悬浮，展示内容，里面有两部分组成，第一是竖条图片，第二是放大图片，图片上处理文字和效果，具体效果可以看视频演示。
在这里插入图片描述

1.5 风格5 - 综合手风琴

风格5 - 综合手风琴，这里面综合了鼠标单击，悬浮等操作手风琴，支持文字，描述，内容，记忆等功能，用起来更方便，具体效果可以看视频演示。

默认

在这里插入图片描述

鼠标悬浮中间图片效果

在这里插入图片描述

鼠标悬浮最后图片效果 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/977e589e30c044648c04811fefe2458b.png)

1.6 风格6 - 简描手风琴

风格6 - 简描手风琴，鼠标悬浮展示图片放大和标题描述内容，文字内容可以自定义，可以加超链接，图片，打造自己的风格，具体效果可以看视频演示。

1.7 风格7 - 功能手风琴

风格7 - 功能手风琴，鼠标单击展开内容，内容是有图文结合组成了，可以自定义内容，打造自己的风格，具体效果可以看视频演示。

在这里插入图片描述

1.8 风格8 - 全屏手风琴

风格8 - 全屏手风琴，全屏显示手风琴，鼠标悬浮展开内容，可以自定义内容，打造自己的风格，具体效果可以看视频演示。

在这里插入图片描述

1.9 风格9 - 全屏灵活手风琴

风格9 - 全屏灵活手风琴，全屏显示手风琴，鼠标悬浮展开内容，可以自定义内容，打造自己的风格，具体效果可以看视频演示。

页面初始化效果

在这里插入图片描述

鼠标悬浮 “宣纸传统制作技艺” 效果

在这里插入图片描述

2.效果和源码

2.1 动态效果

这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的手风琴效果。

html实现好看的多种风格手风琴折叠菜单效果合集(附源码)

2.2 源代码

这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优质源码合集 - xcLeigh</title>
<script type="text/javascript">(function() {window.onclick = function(event) {var heart = document.createElement("b");heart.onselectstart = new Function('event.returnValue=false');document.body.appendChild(heart).innerHTML = "❤";heart.style.cssText = "position: fixed; z-index:999;left:-100%;";var f = 16, // 字体大小x = event.clientX - f / 2, // 横坐标y = event.clientY - f, // 纵坐标c = randomColor(), // 随机颜色a = 1, // 透明度s = 1.2; // 放大缩小var timer = setInterval(function() {if (a <= 0) {document.body.removeChild(heart);clearInterval(timer);} else {heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";y--;a -= 0.016;s += 0.002;}}, 12)}// 随机颜色function randomColor() {return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";}}());
</script>
</head>
<style type="text/css">
*{padding: 0;margin: 0;font-family:华文中宋;
}
.news {background-color: rgba(31,31,31,0.7);position: absolute;top: 0px;width: calc(100% - 32px);height: calc(100% - 32px);border: 1px solid gray;padding: 15px 15px ;z-index: 2;
}
.news h2{padding-bottom: 5px;padding-left:10px;padding-right:10px;color: orange;font-weight: bold;
}
.news h2 span{float:right;cursor:pointer;color:#83B0CD;
}
.news h2 span:hover{color:#F55353;
}
.news ul{padding:5px 10px ;/* background: white; */
}
.news ul li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed gray;text-indent: 15px;font-size: 26px;padding: 10px;
}
.news a{text-decoration: none;color: #06C;
}
.news a:hover{text-decoration: underline;color: red;
}
.bg{background-color:rgb(255,165,0,0.1);
}
.bg2{background-color:rgba(255,165,0,0.9);
}
</style><body>
<div style="position: absolute; top:0px; width: 100%; height: 100%; background-image: url('https://userblink.csdnimg.cn/direct/4a5d96f25c90454586780c81ac5ba47a.jpeg'); z-index: 1; background-size: cover; opacity: 1;"></div><div class="news"><div style="text-align: center;"><h2>手风琴效果演示</h2></div><ul><li><a href="风格1/index.html" target="_blank">★★★★★ 风格1 - 手风琴效果</a></li><li><a href="风格2/index.html" target="_blank">★★★★★ 风格2 - 手风琴效果</a></li><li><a href="风格3/index.html" target="_blank">★★★★★ 风格3 - 手风琴效果</a></li><li><a href="风格4/index.html" target="_blank">★★★★★ 风格4 - 手风琴效果</a></li><li><a href="风格5/index.html" target="_blank">★★★★★ 风格5 - 手风琴效果</a></li><li><a href="风格6/index.html" target="_blank">★★★★★ 风格6 - 手风琴效果</a></li><li><a href="风格7/index.html" target="_blank">★★★★★ 风格7 - 手风琴效果</a></li><li><a href="风格8/index.html" target="_blank">★★★★★ 风格8 - 手风琴效果</a></li><li><a href="风格9/index.html" target="_blank">★★★★★ 风格9 - 手风琴效果</a></li><li><span style="color: white;">【源码下载地址：https://blog.csdn.net/weixin_43151418/article/details/142166577】</span></li></ul></div>
</body></html>

源码下载

html实现好看的多种风格手风琴折叠菜单效果合集(附源码) 点击下载
在这里插入图片描述

万套模板，程序开发，在线开发，在线沟通

专业后端大佬在线沟通需求开发
专业前端大佬在线沟通需求开发
专业网站整套大佬在线沟通需求开发
专业毕业设计大佬在线沟通需求开发
专业大作业大佬在线沟通需求开发
【优惠活动】专属定制，程序在线开发

--------------- 业精于勤，荒于嬉 ---------------

请添加图片描述

--------------- 行成于思，毁于随 ---------------

💢 关注博主带你实现畅游前后端

🏰 加入社区带你体验马航不孤单

💯 神秘个人简介带你体验不一样得介绍

💘 为爱表白为你那个TA，体验别致的浪漫惊喜

🎀 酷炫邀请函带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/142166577（防止抄袭，原文地址不可删除）

html实现好看的多种风格手风琴折叠菜单效果合集(附源码)

文章目录 1.设计来源1.1 风格1 -图文结合手风琴1.2 风格2 - 纯图片手风琴1.3 风格3 - 导航手风琴1.4 风格4 - 双图手风琴1.5 风格5 - 综合手风琴1.6 风格6 - 简描手风琴1.7 风格7 - 功能手风琴1.8 风格8 - 全屏手风琴1.9 风格9 - 全屏灵活手风琴 2.效果和源码2.1 动态效果2.2 源…...

编程日记 2024/9/18 10:59:54

Nacos分布式配置中心

分布式配置的优势： 不需要重新发布我们的应用新建父工程：【将它作为跟所以要把父工程里面的src删掉】新建子模块： 新建bootstrap.properties： 在使用Nacos作为配置中心时，推荐在bootstrap.properties中配置Nacos相…...

编程日记 2024/9/18 10:58:53

C# WinForm 中 DataGridView 实现单元格cell 能进编辑状态但是不能修改单元格的效果

在Windows Forms（WinForms）开发中，DataGridView 控件是一个功能强大的组件， 用于显示和管理表格数据。无论是展示大量数据，还是实现交互式的数据操作， DataGridView 都能提供多样的功能支持，比如…...

编程日记 2024/9/18 10:57:52

GANs-生成对抗网络

参考： https://mp.weixin.qq.com/s?__bizMjM5ODIwNjEzNQ&mid2649887403&idx3&snf61fc0e238ffbc56a7f1249b93c20690&chksmbfa0f632460e035f00be6cc6eb09637d91614e4c31da9ff47077ca468caad1ee27d08c04ca32&scene27 https://cloud.tencent.com…...

编程日记 2024/9/18 10:55:49

e冒泡排序---复杂度O(X^2)

排序原理: 1.比较相邻的元素。如果前一个元素比后一个元素大，就交换这两个元素的位置。 2.对每一对相邻元素做同样的工作,从开始第一对元素到结尾的最后一对元素。最终最后位置的元素就是最大值, public class 冒泡排序 {public static void main(String[] args) {I…...

编程日记 2024/9/18 10:54:48

C语言--结构体（学习笔记）

内容借鉴于b站杜远超官方频道（C语言结构体详解【干货】） 首先C语言中定义变量格式为“数据类型变量名”，如int a; float b;等等。那么结构体则是将多个变量（数据类型变量名）结合在一起的一种新的数据类型&…...

编程日记 2024/9/18 10:53:46

Vue项目中实现用户登录后跳回原地址

本地存储在 Vue 3 中，你可以使用 Vue Router 和 sessionStorage 或 localStorage 来实现用户登录后跳回原来的页面。以下是一种常见的实现方式： 在用户登录之前，记录当前页面的路由路径： 在需要登录的页面组件中，在…...

编程日记 2024/9/18 10:52:45

【Google Chrome Windows 64 version及 WebDriver 版本】

最近升级到最新版本Chrome后发现页面居然显示错乱实在无语, 打算退回原来的版本, 又发现官方只提供最新的版本下载, 为了解决这个问题所有收集了Chrome历史版本的下载地址分享给大家. Google Chrome Windows version 64 位 VersionSize下载地址Date104.0.5112.10282.76 MBhtt…...

编程日记 2024/9/18 10:51:44

[ffmpeg] 音视频编码

本文主要梳理 ffmpeg 中音视频编码的常用函数 API调用常用 API const AVCodec *avcodec_find_encoder(enum AVCodecID id); AVCodecContext *avcodec_alloc_context3(const AVCodec *codec); void avcodec_free_context(AVCodecContext **avctx); int avcodec_open2(AVCode…...

编程日记 2024/9/18 10:50:43

springboot+redis+缓存

整合添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> 连接redis，配置yml文件主机端口号数据库是哪一个密码配置类 p…...

编程日记 2024/9/18 10:48:40

关于http的206状态码和416状态码的意义、断点续传以及CORS使用Access-Control-Allow-Origin来允许跨域请求

一、关于http的206状态码和416状态码的意义及断点续传 HTTP 2xx范围内的状态码表明客户端发送的请求已经被服务器接受并且被成功处理了,HTTP/1.1 206状态码表示客户端通过发送范围请求头Range抓取到了资源的部分数据，一般用来解决大文件下载问题，一般CDN…...

编程日记 2024/9/18 10:47:38

SOMEIP_ETS_114: SD_Entries_Length_wrong_combined

测试目的： 验证DUT能够拒绝一个包含两个正确条目但条目数组长度不正确的SubscribeEventgroup消息，并以SubscribeEventgroupNAck作为响应。描述本测试用例旨在确保DUT遵循SOME/IP协议，当接收到一个条目数组长度与实际条目数量不匹配的Sub…...

编程日记 2024/9/18 10:42:28

SQL:DATEDIFF函数

DATEDIFF函数是用于计算两个日期之间的时间间隔的函数，它在不同的编程语言和数据库系统中都有广泛的应用。以下是对DATEDIFF函数的详细解析： 一、函数用途 DATEDIFF函数的主要用途是计算两个日期之间的时间间隔，这个间隔可以是年、季度、月…...

编程日记 2024/9/18 10:41:24

MATLAB 可视化基础：绘图命令与应用

目录 1. 绘制子图1.1基本绘图命令1.2. 使用 subplot 函数1.3. 绘图类型 2.MATLAB 可视化进阶(以下代码均居于以上代码的数据定义上实现)2.1. 极坐标图2.3. 隐函数的绘制 3.总结在数据分析和科学计算中，数据可视化是理解和解释结果的关键工具。今天，我将…...

编程日记 2024/9/18 10:39:22

掌握 Python 异常处理的实战技巧：从基础到高级应用20240918

掌握 Python 异常处理的实战技巧：从基础到高级应用引言在 Python 编程中，异常处理是保障代码稳健性和可靠性的关键要素之一。无论是在网络请求、资源访问，还是复杂的业务逻辑中，异常处理都不可或缺。本文将从 Python 异常的基…...

编程日记 2024/9/18 10:37:19

One API 部署与配置指南

技术文档：One API 部署与配置指南概述 One API 是一个多功能的 API 管理平台，支持自定义设置、用户管理、多种登录注册方式、主题切换等。本文档提供了详细的部署和配置指南，帮助用户快速搭建和使用 One API。部署基于 Docker 部署 D…...

编程日记 2024/9/18 10:34:16

国密起步7：BouncyCastle使用SM4自定义格式加解密C#版

初级代码游戏的专栏介绍与文章目录-CSDN博客我的github：codetoys，所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。这些代码大部分以Linux为目标但部分代码是纯C的，可以在任何平台上使用。 github源码指引的指引-CSDN博…...

编程日记 2024/9/18 10:32:13

Qt优秀开源项目之二十三：QSimpleUpdater

QSimpleUpdater是开源的自动升级模块，用于检测、下载和安装更新。 github地址：https://github.com/alex-spataru/QSimpleUpdater QSimpleUpdater目前Star不多（911个），但已在很多开源项目看到其身影，比如Not…...

编程日记 2024/9/18 10:29:09

使用 Nmap 进行 SSL/TLS 加密套件枚举

1. Nmap 简介 Nmap（Network Mapper）是一个开源的网络探测和安全审计工具。它广泛用于扫描网络并发现设备、端口及服务，同时也支持多种脚本来进行更高级的安全扫描。Nmap 的 -sV 参数可以用于探测开放端口上的服务及版本信息，配合…...

编程日记 2024/9/18 10:28:08

探索 Python 的火焰：Fire 库的神秘力量

文章目录 🔥 探索 Python 的火焰：Fire 库的神秘力量第一部分：背景介绍第二部分：Fire 库是什么？第三部分：如何安装 Fire？第四部分：简单库函数使用方法第五部分：场景应用第…...

编程日记 2024/9/18 10:26:06

HarmonyOS6 半年磨一剑 - RcCheckbox 组件核心架构与类型系统设计

文章目录前言一、组件整体架构1.1 双组件协作设计1.2 文件结构1.3 装饰器分工二、类型系统深度解析2.1 值类型的宽泛设计2.2 选项配置接口2.3 形状与尺寸类型三、核心参数体系3.1 RcCheckbox 参数全览3.2 RcCheckboxGroup 扩展参数四、内部状态设计4.1 受控模式的双状态机制4.2…...

编程新知 2026/3/31 20:54:30

安装lsaac lab

在 Ubuntu 22.04 环境下，使用 Conda 管理 Isaac Lab 是最稳妥的方案，因为它可以完美隔离 Isaac Sim 所需的特定 Python 版本环境。以下是基于 Conda 的保姆级安装步骤：第一步：创建 Conda 环境Isaac Sim 4.x 需要 Python 3.10&…...

编程新知 2026/3/31 20:29:55

基于STM32H743的调试记录2——从CubeMX到MDK：构建现代化工程模板的实战指南

1. 为什么需要现代化工程模板最近在折腾STM32H743的时候，发现一个很有意思的现象：很多开发者还在使用几年前的老旧工程模板。我自己刚开始用某原子的开发板学习时也踩过这个坑，板子配套的例程跑起来没问题，但一旦想实现些复杂功…...

编程新知 2026/3/31 19:45:28

Verilog仿真踩坑记：为什么你的测试用例‘通过’了，但电路其实是错的？（附X态检测代码）

Verilog仿真中的X态陷阱：如何避免“虚假通过”的致命错误数字电路仿真中，最危险的场景莫过于测试结果显示“Passed”，但实际芯片却存在严重功能缺陷。这种“虚假通过”现象往往源于Verilog中X态（未知状态）的隐蔽特性…...

编程新知 2026/3/31 19:02:21

探索基于V2G技术的电动汽车车载充放电机Matlab仿真模型

基于V2G技术的电动汽车车载充放电机matlab仿真模型最近在研究电动汽车相关技术，V2G（Vehicle-to-Grid）技术特别吸引我。V2G技术允许电动汽车与电网进行双向能量交换，简单来说，电动汽车不仅能从电网充电，还能…...

编程新知 2026/3/31 19:00:21

技术人终身学习：2026年软件测试从业者必跟的5个播客

在技术迭代日新月异的今天，终身学习已不再是可选项，而是软件测试从业者保持竞争力的生存法则。碎片化的时间如何转化为系统性的认知升级？深度思考如何突破日常工作环境的局限？播客，以其伴随性强、信息密度高、视角多元…...

编程新知 2026/3/31 18:13:49

Optick与虚幻引擎集成教程：打造专业级游戏性能分析环境

Optick与虚幻引擎集成教程：打造专业级游戏性能分析环境【免费下载链接】optick C Profiler For Games 项目地址: https://gitcode.com/gh_mirrors/op/optick 作为游戏开发者，你是否曾经为性能瓶颈而苦恼？想要深入了解游戏运行时的性能…...

编程新知 2026/3/31 18:07:40

终极指南：如何将Squire富文本编辑器与现代前端工具链完美集成

终极指南：如何将Squire富文本编辑器与现代前端工具链完美集成【免费下载链接】Squire The rich text editor for arbitrary HTML. 项目地址: https://gitcode.com/gh_mirrors/sq/Squire Squire是一个轻量级、高性能的HTML5富文本编辑器，专为处理…...

编程新知 2026/3/31 17:45:32

B站视频字幕抓取实战：Tampermonkey搭配GreasyFork脚本，5分钟搞定CC字幕导出

B站视频字幕高效提取指南：Tampermonkey与GreasyFork脚本深度应用每次观看B站优质内容时，那些精心制作的字幕是否让你想保存下来反复学习？传统录屏或手动抄写效率低下，而专业工具又过于复杂。本文将带你探索浏览器脚本的魔法世界&…...

编程新知 2026/3/31 17:33:23

数据库优化：高效查询GUID的技巧

在日常的数据库操作中，如何高效地查询数据是一个永恒的话题。特别是当我们处理大型数据集和需要在文本字段中查找特定模式（如GUID）时，查询效率显得尤为关键。今天，我将分享一种优化查询GUID的方法，帮助你从长达数小时的查询时间中解脱出来。背景假设我们有一个数据库…...

编程新知 2026/3/31 17:31:21

文章目录

1.设计来源

1.1 风格1 -图文结合手风琴

1.2 风格2 - 纯图片手风琴

1.3 风格3 - 导航手风琴

1.4 风格4 - 双图手风琴

1.5 风格5 - 综合手风琴

1.6 风格6 - 简描手风琴

1.7 风格7 - 功能手风琴

1.8 风格8 - 全屏手风琴

1.9 风格9 - 全屏灵活手风琴

2.效果和源码

2.1 动态效果

2.2 源代码

源码下载

万套模板，程序开发，在线开发，在线沟通

相关文章：