Accordian菜单，手风琴菜单，折叠菜单代码

时间：2013-04-01 20:58 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3实现的手风琴分栏显示效果</title>
<style>
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
body, form, ul, li, p, h1, h2, h3, h4, h5
{
	margin: 0;
	padding: 0;
}
body { background-color: #606061; }
img { border: none; }
p
{
	font-size: 1em;
	margin: 0 0 1em 0;
}

html { font-size: 100%; height: 100%; /* IE hack */ }
body { font-size: 0.75em; } /* Base font 12px */
table { font-size: 100%; /* IE hack */ }

input, select, textarea, th, td { font-size:1em; }

/* CSS Accordion styles */
dl
{
	padding: 10px;
	min-width: 960px;
}
	a.ie { background: transparent; text-decoration: none; }
	dl dt
	{
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border: 1px solid #cccccc;
		margin: 0;
	}
		dl dt a,
		dl a.ie dt
		{
			color: #ffffff;
			font-weight: bold;
			text-decoration: none;
			padding: 10px;
			display: block;
		}
	dl dd
	{
		color: #cccccc;
		margin: 0;
		height: 0;
		overflow: hidden;
		-webkit-transition: height 1s ease;
	}
		dl dd p
		{
			padding: 10px;
			margin: 0;
		}
	dl dd:target
	{
		height: auto;
	}
	dl a.ie:hover dd,
	dl a.ie:focus dd
	{
		height: auto;
		color: #cccccc !important;
	}
	
@media (-webkit-transition) {
	dl dd:target
	{
		height: 6.667em;
	}
}
</style>
<title>Accordian菜单，手风琴菜单，折叠菜单代码</title>
</head>
<body>
	
	<dl>
		<dt><a href="#Section1">Section 1</a></dt>
		<dd id="Section1">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
			</p>
		</dd>
		<dt><a href="#Section2">Section 2</a></dt>
		<dd id="Section2">
			<p>
				源码爱好者提供网站源码、网页素材、书籍教程、网页特效代码等，做有质量的学习型源码下载站。
			</p>
		</dd>
		<dt><a href="#Section3">Section 3</a></dt>
		<dd id="Section3">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
			</p>
		</dd>
		<dt><a href="#Section4">Section 4</a></dt>
		<dd id="Section4">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
			</p>
		</dd>
	</dl>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

纯CSS3实现的手风琴效果，不使用任何JS代码，调用简单，非常实用，Accordian菜单，手风琴菜单，折叠菜单代码。本效果需要运行在火狐或Chrome等浏览器中，IE8不支持本效果哦。 Accordian菜单，手风琴菜单，折叠菜单代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/1002.html