垂直手风琴

最新推荐文章于 2021-12-18 21:54:56 发布
最新推荐文章于 2021-12-18 21:54:56 发布
阅读量374 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwwjiahuan/article/details/73027326
版权 
<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="utf-8">
	<title>垂直手风琴</title>
	<style type="text/css">
		 .accordionMenu{
		 	background: #fff;
		 	color: #424242;
		 	font: 12px Arial, Verdana, sans-serif;
		 	margin: 0 auto;
		 	padding: 10px;
		 	width: 500px;
		 }
		 .accordionMenu h2{
		 	margin: 5px 0;
		 	padding: 0;
		 	position: relative;
		 }
		 .accordionMenu h2:before{/*制作向下三角效果*/
		 	border:5px solid #fff;
		 	border-color: #fff transparent transparent;
		 	content: "";
		 	height: 0;
		 	position: absolute;
		 	right: 10px;
		 	top: 15px;
		 	width: 0;

		 	-webkit-transition: border-color 0.1s ease-in;
			-moz-transition: border-color 0.1s ease-in;
			-0-transition: border-color 0.1s ease-in;
			transition: border-color 0.1s ease-in;
		 }
		 .accordionMenu h2 a{/*制作手风琴标题效果栏*/
		 	background: #8f8f8f;
		 	/*CSS3制作渐变背景图片*/
			background-image: -ms-linear-gradient(top, #cecece, #8f8f8f);
			background-image: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
			background-image: -webkit-linear-gradient(top, #cecece, #8f8f8f);
			background-image: -o-linear-gradient(top, #cecece, #8f8f8f);
			background-image: -moz-linear-gradient(top, #cecece, #8f8f8f);
			background-image: linear-gradient(top, #cecece, #8f8f8f);
			border-radius: 5px;
			color: #424242;
			display: block;
			font-size: 13px;
			font-weight: normal;
			margin: 0;
			padding: 10px 10px;
			text-shadow: 2px 2px 2px #aeaeae;
			text-decoration: none;
		 }
		 .accordionMenu :target h2 a,/*目标标题的效果*/
		 .accordionMenu h2 a:focus,
		 .accordionMenu h2 a:hover,
		 .accordionMenu h2 a:active {
		 	background: #2288dd;
		 	/*CSS3制作渐变背景图片*/
			background-image: -ms-linear-gradient(top, #6bb2ff, #2288dd);
			background-image: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
			background-image: -webkit-linear-gradient(top, #6bb2ff, #2288dd);
			background-image: -o-linear-gradient(top, #6bb2ff, #2288dd);
			background-image: -moz-linear-gradient(top, #6bb2ff, #2288dd);
			background-image: linear-gradient(top, #6bb2ff, #2288dd);
			color: #fff;
		 }
		 .accordionMenu p{/*标题栏对应的内容*/
		 	margin: 0;
		 	height: 0;
		 	overflow: hidden;
		 	padding: 0 10px;
		 	
			-webkit-transition: height 0.1s ease-in;
			-moz-transition: height 0.1s ease-in;
			-0-transition: height 0.1s ease-in;
			transition: height 0.1s ease-in;
		 }
		 /*这部分是显示内容的关键代码*/
		 .accordionMenu :target p {
		 	height: 100px;
		 	overflow: auto;
		 }
		 .accordionMenu :target h2 before {/*展开时标题的三角效果*/
		 	border-color: transparent transparent transparent #fff; 
		 }
	</style>
</head>
<body>
	<div class="accordionMenu">
		<div class="menuSection" id="brand">
			<h2><a href="#brand">Brand</a></h2>
			<p>Lornm kjfnd sdhfsoi</p>
		</div>
		<div class="menuSection" id="promotion">
			<h2><a href="#promotion">Promotion</a></h2>
			<p>Lornm kjfnd sfsd</p>
		</div>
		<div class="menuSection" id="event">
			<h2><a href="#event">Event</a></h2>
			<p>Lornm kjfnd sdhfssrrtoi</p>
		</div>
	</div>
</body>
</html>

wwwjiahuan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现垂直手风琴效果
10-20
本篇文章主要介绍了原生JS实现垂直手风琴效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
Bootstrap垂直手风琴动画特效
04-09
Bootstrap垂直手风琴动画特效是一款基于原生的Bootstrap Accordion组件来制作，通过CSS3来对它进行美化，效果美观大方。
CSS3实现垂直手风琴
用CSS3动画实现loading效果
07-18 279
源代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .A { w...
css元素类型
Lyuuku爱吃苹果
01-29 104
css元素类型 css元素分为三种：块级元素、行内元素和行内块元素 1、 块级元素 设置display:block就是将元素显示为块级元素 常用的块状元素有： &lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt;、&lt;table&gt.
Bootstrap3扁平风格垂直手风琴特效
ke0971的博客
03-16 495
http://www.jq22.com/jquery-info11675
垂直手风琴案例
qq_38068491的博客
09-08 319
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; * { m
jQuery垂直手风琴多级下拉菜单代码http://www.lanrenzhijia.com/nav/4584.html
qweasdzxc_1092665276的博客
04-03 1236
http://www.lanrenzhijia.com/nav/4584.html点击打开链接html代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;多级菜单&lt;/title&gt; &lt;meta name="v
jQuery多级下拉垂直手风琴代码.zip
07-11
代码简介：jQuery多级下拉垂直手风琴代码是一款通过将不同的子菜单进行分组，制作出多级菜单的效果。
超酷CSS3垂直手风琴列表
07-04
超酷CSS3垂直手风琴列表
CSS布局案例 7-51 垂直手风琴效果
dpl12的博客
05-04 465
文章目录前言实现过程1.步骤2.代码3.效果 前言 使用css3实现垂直手风琴效果。 实现过程 1.步骤 垂直手风琴效果实现步骤: 1、一个区域内设置三个小区域，小区域内设置一个a标签、向下箭头和p标签内容，实现点击a标签显示内容 2、a标签设置锚点链接，链接到小区域，使用target选择器对被使用的目标元素设置样式 3、a标签设置渐变效果（被悬停时和被锚点链接使用时）；p标签内容设置超出隐藏滚动条效果和初始隐藏点击打开效果；三角箭头使用边框制作，点击时设置可见方向 2.代码 &lt
Css3垂直手风琴下拉列表菜单
ICode联盟
12-18 860
下载地址 这是一款简单但实用的多级垂直手风琴下拉列表菜单。该多级手风琴菜单完全使用CSS来制作，它通过将不同的子菜单进行分组，制作出多级菜单的效果。该多级手风琴菜单通过在checkbox元素上使用:checked伪元素来制作。如果需要一些好看的动画效果，可以实用插件中提供的main.js文件，它可以提供菜单打开和收缩时左侧小箭头的动画效果。该多级手风琴菜单的HTML结构非常简单：整个手风琴是一个无序列表。如果某个列表项中包含有子菜单，则添加一个input[type=checkbox]和一个label标签，
垂直手风琴折叠菜单
weixin_30569153的博客
12-04 177
在线演示 本地下载 转载于:https://www.cnblogs.com/qixidi/p/10062621.html
纵向手风琴html,CSS3制作垂直手风琴
weixin_39969028的博客
06-02 490
说起手风琴的制作，大家肯定首选就是使用jQuery来制作，我在《如何使用jQuery制作手风琴效果》也简单的介绍了使用jQuery制作手风琴效果。但今天我在Saud Khan的《Cross Browser Pure CSS3 Vertical Accordion》中学习了一种使用纯CSS制作手风琴效果，稍加整理了一下，贴上来与大家一起分享。使用纯CSS制作手风琴效果，我们主要使用的是伪类“:hov...
伪类选择器之目标伪类 :target 手风琴菜单实例
bing_JavaScript的博客
08-09 890
手风琴                 .accordionMenu{             background:#fff;             color: #424242;             font: 12px Arial, Verdana, sans-serif;             margin: 0 auto;             paddin
grpcio-1.3.0-cp35-cp35m-win_amd64.whl
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
ASP.NET多语种网络硬盘系统的设计(源码)
06-13
网络硬盘系统是计算机网络中比较流行的一种应用软件，但是一般的网络硬盘系统只适用于使用单一语种的人群。为满足不同语种人群对网络硬盘系统的需求，设计了多语种网络硬盘系统。采用ASP.NET 2.0开发语言，利用ASP.NET中的三层结构、B/S模式结构以及ASP.NET网页资源的设计思路，实现了包括文件夹的操作、文件的操作、网页的多语种化三个功能模块；通过文件夹功能模块，可以添加、删除、更改名字、移动、浏览文件夹；通过文件功能模块，可以查看文件属性、上传、下载、更改名字、移动文件；通过系统的多语种化模块，能够自动识别客户端的默认语言并反馈给客户端相应语言的网页。通过应用多语种网络硬盘系统，可以满足不同语种人群共享一个网络硬盘系统的需求，具有一定的应用价值。
pyzmq-22.0.0-cp38-cp38-win_amd64.whl
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
pyzmq-22.0.2-cp39-cp39-manylinux2010_i686.whl
最新发布
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
好看的垂直手风琴菜单列表代码
05-25
这是一个基于HTML、CSS和JavaScript的简单垂直手风琴菜单列表代码，你可以根据自己的需要进行修改和定制。 HTML代码： ```html <div class="accordion-header">Item 1 <div class="accordion-content">This ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值