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

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

news 2025/9/17 14:06:34

文章目录

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

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...

编程新知 2025/9/9 21:25:50

线程同步：确保多线程程序的安全与高效！

全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块第三部分&#xff…...

编程新知 2025/8/11 21:47:18

ardupilot 开发环境eclipse 中import 缺少C++

目录文章目录目录摘要1.修复过程摘要本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/9/1 22:19:02

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度五、实际案例大…...

编程新知 2025/7/25 14:20:29