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

news2024/12/24 18:26:37

文章目录

  • 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（防止抄袭，原文地址不可删除）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2143804.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

等保测评中的个人信息保护：重点与策略

等保测评中的个人信息保护：重点与策略

在信息安全等级保护&#xff08;等保&#xff09;测评过程中&#xff0c;个人信息保护成为企业必须重视的关键环节。随着《个人信息保护法》等法规的出台&#xff0c;个人信息保护不仅是企业通过等保测评的重要指标&#xff0c;更是企业社会责任和用户信任的基础。将探讨等保测…
阅读更多...
Leetcode 每日一题：Evaluate Division

Leetcode 每日一题：Evaluate Division

写在前面 今天依旧是一道来自图论的题目&#xff0c;而今天这道题目的难度也是相对于前面分享过的题目中难度最大的一种。题主在第一次做这道题的时候根本没有反应过来这道题目可以转化为 图 来解决。而这道题目将一个 二维数组的乘除 运算转化为 图论 的过程需要一定的数学思…
阅读更多...
如何在Android上实现RTSP服务器

如何在Android上实现RTSP服务器

技术背景 在Android上实现RTSP服务器确实是一个不太常见的需求&#xff0c;因为Android平台主要是为客户端应用设计的。在一些内网场景下&#xff0c;我们更希望把安卓终端或开发板&#xff0c;作为一个IPC&#xff08;网络摄像机&#xff09;一样&#xff0c;对外提供个拉流的…
阅读更多...
rhat Linux虚拟机桥接网络配置

rhat Linux虚拟机桥接网络配置

本文物理机安装Windows10系统&#xff0c;虚拟机安装redhat7.7。 0、基本概念 VMware中的桥接模式&#xff08;Bridged Mode&#xff09;是一种虚拟机网络配置方式&#xff0c;它允许虚拟机直接连接到宿主机的物理网络&#xff0c;使得虚拟机能够像物理机一样访问外部网络。 在…
阅读更多...
高颜值，实力派丨捷顺科技旗舰级人脸识别门禁、速通摆闸新品发布

高颜值，实力派丨捷顺科技旗舰级人脸识别门禁、速通摆闸新品发布

9月12日&#xff0c;捷顺科技成功举办以“全新进化&#xff0c;定义非凡”为主题的2024智慧人行线上新品发布会&#xff0c;正式推出两款全新一代的智慧人行领域旗舰级产品——人脸识别门禁Y20、速通摆闸3910A。 作为国内最早进入出入口控制管理行业的企业之一&#xff0c;捷顺…
阅读更多...
深度学习-生成式检索-论文速读-2024-09-14

深度学习-生成式检索-论文速读-2024-09-14

深度学习-生成式检索-论文速读-2024-09-14 前言: 生成式检索&#xff08;Generative Retrieval&#xff0c; GR&#xff09;是一种结合了生成模型和检索系统的人工智能技术方法。这种方法在处理信息检索任务时&#xff0c;不仅依赖于已有数据的检索&#xff0c;还能生成新的、…
阅读更多...
unity的学习

unity的学习

因为需要构建一个三维物理环境,所以学习了unity,半天就可以,非常简单清晰 1.安装 去官网下载unity hub . 然后需要下载editor,但注意已经有了vs2022就不要再下一次了,下的时候会全放c盘,再安装.c盘都装不下了. 如果美游vs2022,就先自己把vs2022安装好,再安装unity hub.(其实不…
阅读更多...
Vue自定义指令以及项目中封装过的自定义指令

Vue自定义指令以及项目中封装过的自定义指令

自定义指令 Vue 自定义指令是 Vue.js 框架中一个非常强大的功能&#xff0c;它允许你注册一些全局或局部的自定义 DOM 操作指令&#xff0c;以便在模板中复用。自定义指令通过 Vue.directive() 方法进行全局注册&#xff0c;或者在组件的 directives 选项中局部注册。 自定义…
阅读更多...
YOLOV8输出预测框的坐标信息

YOLOV8输出预测框的坐标信息

结果&#xff1a;&#xff08;前提是对应类别的yolov8模型已经训练好&#xff09; 具体实现&#xff1a; 在ultralytics\utils\plotting.py里面 CtrlF搜索box_label 再次照片的最后一行输入&#xff1a; # 左上角cv2.putText(self.im, f"({p1[0]}, {p1[1]})", (p1…
阅读更多...
计算机毕业设计选题推荐-共享图书管理系统-小程序/App

计算机毕业设计选题推荐-共享图书管理系统-小程序/App

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…
阅读更多...
【北京迅为】《STM32MP157开发板使用手册》- 第三十一章Cortex-M4窗口看门狗实验

【北京迅为】《STM32MP157开发板使用手册》- 第三十一章Cortex-M4窗口看门狗实验

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器&#xff0c;既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构&#xff0c;主频650M、1G内存、8G存储&#xff0c;核心板采用工业级板对板连接器&#xff0c;高可靠&#xff0c;牢固耐…
阅读更多...
国外SIM卡有信号无法连接，如何解决？

国外SIM卡有信号无法连接，如何解决？

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…
阅读更多...
[Java]SpringBoot能力进阶

[Java]SpringBoot能力进阶

配置优先级 SpringBoot中支持三种格式的配置文件 优先级: application.properties文件 > application.yml文件 > application.yaml文件 SpringBoot除了通过配置文件配置属性, 还支持Java系统属性和命令行参数的方式 进行属性配置 1.在IDEA中配置java系统属性和命令行参…
阅读更多...
19、Python如何读写excel文件

19、Python如何读写excel文件

在数据处理和分析时&#xff0c;经常使用Excel&#xff0c;而手动操作Excel可能非常繁琐和耗时。Python提供了许多强大的库和工具&#xff0c;可以方便地操作Excel文件。 在Python标准库中是不支持Excel读写的&#xff0c;我们要安装第三方库来实现。 在Python中操作Excel有多…
阅读更多...
设计一个高质量的API接口：提升应用性能的关键步骤

设计一个高质量的API接口：提升应用性能的关键步骤

在当今的软件开发世界中&#xff0c;API&#xff08;应用程序编程接口&#xff09;接口扮演着至关重要的角色。一个设计精良的API不仅能够提高开发效率&#xff0c;还能提升用户体验&#xff0c;并确保系统的可扩展性和安全性。本文将探讨如何设计一个高质量的API接口&#xff…
阅读更多...
Golang | Leetcode Golang题解之第412题Fizz Buzz

Golang | Leetcode Golang题解之第412题Fizz Buzz

题目&#xff1a; 题解&#xff1a; func fizzBuzz(n int) (ans []string) {for i : 1; i < n; i {sb : &strings.Builder{}if i%3 0 {sb.WriteString("Fizz")}if i%5 0 {sb.WriteString("Buzz")}if sb.Len() 0 {sb.WriteString(strconv.Itoa(i…
阅读更多...
Davinci 大数据可视化分析

Davinci 大数据可视化分析

Davinci 大数据可视化分析 一、Davinci 架构设计1.1 Davinci定义1.2 Davinci 应用场景 二、Davinci 安装部署2.1 部署规划2.2 前置环境准备2.3 Davinci部署2.3.1 物料准备2.3.2 安装配置 2.4 环境变量配置2.5 初始化数据库2.5.1 创建数据库及用户 2.5.2 建表2.6 初始化配置 三、…
阅读更多...
开源免费的NAS系统-TrueNAS CORE搭建和使用(保姆级教程)

开源免费的NAS系统-TrueNAS CORE搭建和使用(保姆级教程)

TrueNAS CORE说明 TrueNASCORE（以前称为 FreeNAS）是世界上最受欢迎的存储操作系统，因为它使您能够构建自己的专业级存储系统，用于各种数据密集型应用程序，而无需任何软件成本。只需将其安装到硬件或虚拟机上，即可体验开源存储的真正存储自由。 TrueNAS提供了CORE和Ente…
阅读更多...
如何用python构建简单神经网络？

如何用python构建简单神经网络？

今天&#xff0c;我们将运用Python来搭建一个简单的神经网络模型&#xff01;并深入浅出地探索其背后的运作原理。 多输入 提及神经网络时&#xff0c;我们可以将其视为一个高度灵活的函数来理解和应用。 为了做出准确的预测&#xff0c;我们需要构建能够同时组合多个输入的…
阅读更多...
吸浮毛宠物空气净化器推荐，希喂、小米、有哈宠物空气净化器测评

吸浮毛宠物空气净化器推荐，希喂、小米、有哈宠物空气净化器测评

养猫需谨慎&#xff0c;不然就要做猫奴一辈子啦&#xff01;上次堂妹来我家住几天&#xff0c;刚开始还担心和猫处不来&#xff0c;不敢去摸它&#xff0c;走的时候已经约好下次来看它的时间&#xff0c;笑死我了。毕竟猫咪这么可爱&#xff0c;很少有人可以抵抗它的魅力。 这不…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023