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

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

news 2026/5/27 15:16:06

文章目录

  • 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分布式配置中心

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

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

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

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

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

GANs-生成对抗网络

参考&#xff1a; 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.比较相邻的元素。如果前一个元素比后一个元素大&#xff0c;就交换这两个元素的位置。 2.对每一对相邻元素做同样的工作,从开始第一对元素到结尾的最后一对元素。最终最后位置的元素就是最大值, public class 冒泡排序 {public static void main(String[] args) {I…...

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

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

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

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

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

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

编程日记 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&#xff0c;配置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抓取到了资源的部分数据&#xff0c;一般用来解决大文件下载问题&#xff0c;一般CDN…...

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

SOMEIP_ETS_114: SD_Entries_Length_wrong_combined

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

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

SQL:DATEDIFF函数

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

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

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

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

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

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

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

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

One API 部署与配置指南

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Godot中型项目工程化实践：目录规范、资源引用与状态管理

1. 这不是续集&#xff0c;而是项目落地的分水岭“Godot 游戏引擎项目&#xff08;二&#xff09;”——看到这个标题&#xff0c;很多人第一反应是&#xff1a;“哦&#xff0c;上一篇讲了环境搭建和Hello World&#xff0c;这篇该讲节点树和信号了&#xff1f;”但我在带三个…...

编程新知 2026/5/26 3:13:58

电子商务设计师软考备战：特别篇 - 综合模拟与备考策略

1. 考试形式与内容结构1.1 考试基本信息考试科目与时间基础知识考试&#xff1a;上午9:00-11:30&#xff08;150分钟&#xff09;应用技术考试&#xff1a;下午2:00-4:30&#xff08;150分钟&#xff09;题型与分值分布上午考试&#xff08;基础知识&#xff09;&#xff1a; -…...

编程新知 2026/5/25 23:51:45

光轮智能 谢晨 访谈总结机器人仿真数据产业

光轮智能 谢晨 访谈总结机器人仿真关于创始人关于数据数据金字塔数据痛点仿真数据的重要性仿真数据的质量b站链接地址公司官网关于创始人 清华物理&#xff1b;哥伦比亚金融&#xff1b;英伟达智驾仿真&#xff1b;小鹏智驾仿真&#xff1b;现为光轮智能CEO 关于数据 数据的…...

编程新知 2026/5/25 23:43:44

DeepSeek代码风格检查避坑指南（内部审计报告首次披露：37个被忽略的合规红线）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek代码风格检查的合规性本质与审计背景 DeepSeek代码风格检查并非单纯的技术偏好约束&#xff0c;而是嵌入研发治理链条中的合规性控制节点。其本质是将编程实践与组织级安全策略、行业监管要求&…...

编程新知 2026/5/25 20:16:03

MeloTTS实战指南：解决多语言TTS部署中的核心挑战

MeloTTS实战指南&#xff1a;解决多语言TTS部署中的核心挑战 【免费下载链接】MeloTTS High-quality multi-lingual text-to-speech library by MyShell.ai. Support English, Spanish, French, Chinese, Japanese and Korean. 项目地址: https://gitcode.com/GitHub_Trendin…...

编程新知 2026/5/25 18:32:47

实战解锁：在Blender中掌握专业级MMD动画制作全流程

实战解锁&#xff1a;在Blender中掌握专业级MMD动画制作全流程 【免费下载链接】blender_mmd_tools MMD Tools is a blender addon for importing/exporting Models and Motions of MikuMikuDance. 项目地址: https://gitcode.com/gh_mirrors/bl/blender_mmd_tools MMD …...

编程新知 2026/5/25 17:08:38

为什么92%的数据库重构失败？Claude设计辅助如何在48小时内规避反范式陷阱？

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;为什么92%的数据库重构失败&#xff1f;——反范式陷阱的本质溯源 数据库重构失败率高达92%&#xff0c;其核心症结并非技术能力不足&#xff0c;而是对“反范式”这一设计策略的误读与滥用。许多团队在性能压…...

编程新知 2026/5/26 22:10:00

还在手动触发Lindy子任务？这6个隐藏API+3个低代码集成技巧，今天就能上线全自动流水线

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Lindy多步骤任务自动化的价值与演进路径 Lindy效应指出&#xff0c;一项技术的预期剩余寿命与其当前已存在时间正相关&#xff1b;在自动化领域&#xff0c;Lindy原则催生了对“经久验证、语义稳定、可组合性强…...

编程新知 2026/5/25 15:28:08

Godot4地图分层绘制实战：从图层混乱到专业场景管理的避坑指南

Godot4地图分层绘制实战&#xff1a;从图层混乱到专业场景管理的避坑指南当你第一次在Godot4中完成一个复杂场景的TileMap绘制时&#xff0c;那种成就感无与伦比。但随着场景复杂度提升&#xff0c;你是否遇到过这些头疼问题&#xff1a;角色明明站在树后却被树叶遮挡&#xff…...

编程新知 2026/5/25 14:10:50

5大核心功能掌握HandheldCompanion：Windows掌机终极控制伴侣

5大核心功能掌握HandheldCompanion&#xff1a;Windows掌机终极控制伴侣 【免费下载链接】HandheldCompanion ControllerService 项目地址: https://gitcode.com/gh_mirrors/ha/HandheldCompanion 你是否正在寻找一款能够彻底改变Windows掌机游戏体验的控制软件&#xf…...

编程新知 2026/5/25 13:53:21