css3实现手风琴效果

最新推荐文章于 2024-08-13 14:51:58 发布

tanmuxue

最新推荐文章于 2024-08-13 14:51:58 发布

阅读量1k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/tanmuxue/article/details/51567080

版权

这篇博客介绍了如何利用CSS3实现手风琴效果，通过详细展示HTML结构和CSS样式，指导读者创建一个包含brand、promotion和event三个部分的手风琴菜单。菜单项点击后会展开对应的段落内容，同时标题的三角图标也会随着展开状态改变方向，整个过程平滑过渡。

摘要由CSDN通过智能技术生成

<div class="accordionMenu">
	<div class="menuSeciton" id="brand">
		<h2><a href="#brand">brand</a></h2>
		<p>Lorme ipsum dolor....</p>
	</div>
	<div class="menuSeciton" id="promotion">
		<h2><a href="#promotion">promotion</a></h2>
		<p>Lorme ipsum dolor....</p>
	</div>
	<div class="menuSeciton" id="event">
		<h2><a href="#event">event</a></h2>
		<p>Lorme ipsum dolor....</p>
	</div>
</div>

<style>
	*{padding: 0; margin: 0;}
	a{
		text-underline: none;
		text-decoration: none;
	}
	.accordionMenu{
		background: #fff;
		color: #424242;
		font: 12px Arial, Verdana,sans-serif;
		margin: 0 auto;
		padding: 10px;
		width: 500px;
	}
	.accor