css3可折叠式/手风琴式面板(ie8及以下不兼容)
2014-02-12 11:14
681 查看
原demo地址:http://www.thecssninja.com/demo/css_accordion/
ie9由于不支持css3的transition,所以面板下拉和收起的时候不是缓慢的动画效果
_styles.css
效果图:
ie9由于不支持css3的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; }
效果图:
相关文章推荐
- css3可折叠式/手风琴式面板(ie8及以下不兼容) 分类: css3 button 按钮 面板 2014-02-12 11:14 312人阅读 评论(0) 收藏
- css3糖果风格按钮(ie8及以下不兼容)
- selectivizr兼容ie8以下的css3伪类选择器以后得ie9hack问题
- css3 模拟 mac 的 菜单图标列表(兼容ie,但ie8及以下效果有差异) 分类: css3 button 按钮 面板 2014-02-12 14:21 741人阅读 评论(0) 收藏
- css3 模拟 mac 的 菜单图标列表(兼容ie,但ie8及以下效果有差异)
- css3 media媒体查询器用法总结 兼容ie8以下的方法
- ie8以下兼容圆角等css3的属性
- css3糖果风格按钮(ie8及以下不兼容) 分类: css3 button 按钮 2014-02-11 17:35 632人阅读 评论(0) 收藏
- 鼠标经过图像变大,IE8以下不兼容
- 兼容IE8的圆角css3 border-radius
- IE8以下兼容
- ie8兼容css3的样式 如@media
- 让AngularJS兼容IE8及其以下浏览器版本的方法
- css后代选择器兼容IE8及IE8以下
- 让Ie8兼容HTML5和CSS3
- 鼠标经过图像变大,IE8以下不兼容
- 关于在asp.net中播放MP4格式的视频(好吧,只兼容支持html5的浏览器,ie8及以下的都歇菜了)
- 兼容IE8及其以下的浏览器
- js新建一个日期对象,指定日期值. 兼容IE8以下
- bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5和css3