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

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

news 2025/7/14 13:52:19

文章目录

  • 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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/7/6 4:04:07

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/7/14 11:22:27

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/7/8 20:29:33

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/6/27 0:52:23

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/7/6 20:47:25

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/7/7 20:05:25

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/6/21 12:34:41

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/7/9 3:40:34

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/6/21 5:00:15