Home >Web Front-end >CSS Tutorial >A beautiful pure CSS accordion effect code

A beautiful pure CSS accordion effect code

零下一度
零下一度Original
2017-04-21 17:16:152677browse

This article shares the accordion implemented in pure css. Friends who like it can take a look at

Source code CSS part

.accordionMenu {
			width: 500px;
			margin: 0 auto;
			padding: 10px;
			background-size: #fff;
			color: #424242;
			font: 12px Arial, Verdana, sans-serif;
		}
		.accordionMenu h2 {
			position: relative;
			margin: 5px 0;
			padding: 0;
		}
		.accordionMenu h2:before { /*制作向下三角效果*/
			position: absolute;
			top: 15px;
			right: 10px;
			width: 0;
			height: 0;
			border: 5px solid #fff;
			border-color: #fff transparent transparent;
			content: "";
		}
		.accordionMenu h2 a { /*制作手风琴标题栏效果*/
			background: #8f8f8f;
			background: -moz-linear-gradient(top, #cecece, #8f8f8f);
			background: -webkit-gradinet(linear, left top,left bottom, from(#cecece),to(#8f8f8f));
			background: -webkit-linear-gradient(top, #cecece, #8f8f8f);
			background: -o-linear-gradient(top, #cecece, #8f8f8f);
			background: 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;
			background: -moz-linear-gradient(top, #6bb2ff, #2288dd);
			background: -webkit-gradinet(linear, left top, left bottom,from(#6bb2ff), to(#2288dd));
			background: -webkit-linear-gradient(top, #6bb2ff, #2288dd);
			background: -o-linear-gradient(top, #6bb2ff, #2288dd);
			background: linear-gradient(top, #6bb2ff, #2288dd);
			color: #fff;
		}
		.accordionMenu p { /* 标题栏对应的内容 */
			overflow: hidden;
			height: 0; /*默认栏目内容高度为0,达到隐藏效果*/
			margin: 0;
			padding: 0 10px;
			-webkit-transition: height 0.5s ease-in;
			-moz-transition: height 0.5s ease-in;
			-o-transition: height 0.5s ease-in;
			transition: height 0.5s ease-in;
		}

		/*关键代码 显示内容部分信息*/
		.accordionMenu :target p { /*展开对应目标内容*/
			overflow: hidden;
			height: 20px;/*显示对应目标栏内容*/
		}

		.accordionMenu :target h2:before { /*展开时标题三角效果*/
			border-color: transparent transparent transparent #fff;
		}

Source code html part

	<p class="accordionMenu">
		<p class="menuSection" id="brand">
			<h2><a href="#brand">Brand</a></h2>
			<p>Lorem ipsum dolor...</p>
		</p>
		<p class="menuSection" id="promotion">
			<h2><a href="#promotion">promotion</a></h2>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
		</p>
		<p class="menuSection" id="Event">
			<h2><a href="#Event">Event</a></h2>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
			<p>Lorem ipsum dolor sit amet...</p>
		</p>
	</p>

MoreCSS3 Special effects codePlease pay attention to: //m.sbmmt.com/xiazai/js/CSS3

The above is the detailed content of A beautiful pure CSS accordion effect code. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn