css 3折り畳み式/アコーディオン式パネル(ie 8以下互換性なし)
5157 ワード
元demoアドレス:http://www.thecssninja.com/demo/css_accordion/
ie 9はcss 3のtransitionをサポートしていないため、パネルのドロップダウンや閉じるときは緩やかなアニメーション効果ではありません
_styles.css
効果図:
ie 9はcss 3のtransitionをサポートしていないため、パネルのドロップダウンや閉じるときは緩やかなアニメーション効果ではありません
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="_styles.css" media="screen" />
<title>Accordion effect using CSS | The CSS Ninja</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>
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="#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>
_styles.css
/* Just some base styles not needed for example to function */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
body, form, ul, li, p, h1, h2, h3, h4, h5
{
margin: 0;
padding: 0;
}
body { padding: 60px 0 0; 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;
}
dl dt
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #cccccc;
margin: 0;
}
dl dt a
{
color: #ffffff;
font-weight: bold;
text-decoration: none;
padding: 10px;
display: block;
}
dl dt + dd:first-child { height: auto; }
dl dd
{
color: #cccccc;
margin: 0;
overflow: hidden;
transition: height 1s ease;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
}
dl dd p
{
padding: 10px;
margin: 0;
}
dl dd:not(:target) { height: 0; }
dl dd:target { height: 6.667em; }
dl a.ie:hover dd,
dl a.ie:focus dd
{
height: auto;
color: #cccccc !important;
}効果図:
