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

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

news 2025/12/29 9:07:47

文章目录

  • 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

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/12/22 12:09:49

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2025/12/20 22:10:51

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/12/19 17:21:25

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2025/12/15 21:06:42

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2025/12/27 5:13:32

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2025/12/24 20:33:50