纯css的accordion效果(代码分享)
2011-10-30 10:59
489 查看
css中注意下:target和transition部分就大致清楚了.代码中css的prefix为了简明只用了-moz-:target定位的元素对应于浏览器url最后的#xxx,xxx是元素的id,我们通过点击标题链接实现切换功能。以下是jsfiddle中得实际效果(firefox浏览或者修改css前缀)
css:
<div class="accordion"> <div class="item"> <h3 class="title round"> <a href="#one">title one</a> </h3> <div id="one" class="content round"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p> </div> </div> <div class="item"> <h3 class="title round"> <a href="#two">title two</a> </h3> <div id="two" class="content round"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p> </div> </div> <div class="item"> <h3 class="title round"> <a href="#three">title three</a> </h3> <div id="three" class="content round"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p> </div> </div> </div><div class="accordion"> <div class="item"> <h3 class="title round"> <a href="#one">title one</a> </h3> <div id="one" class="content round"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p> </div> </div> <div class="item"> <h3 class="title round"> <a href="#two">title two</a> </h3> <div id="two" class="content round"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p> </div> </div> <div class="item"> <h3 class="title round"> <a href="#three">title three</a> </h3> <div id="three" class="content round"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p> </div> </div> </div>
css:
.round { border-radius: 5px; } .accordion { width: 500px; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); padding: 5px; border: 5px solid rgba(54,54,54,0.3); position: absolute; top: 20px; left: 50px; } .accordion .item { margin-bottom: 5px; } .accordion .item:last-child { margin-bottom: 0; } .accordion .title { background:-moz-linear-gradient(top, #eee, #dcdcdc, #dcdcdc, #dcdcdc); } .accordion .title > a{ height: 30px; display:block; line-height: 30px; padding-left: 10px; font-size: 15px; color: #585858; text-shadow: 1px 1px 1px #fff; font-weight: bold; text-decoration:none; } .accordion .title+.content { height: 0; padding: 0; opacity: 0; border: 1px solid #eee; overflow-y: auto; -moz-transition: all 0.2s linear; } .accordion .title+.content:target { opacity: 1; padding: 5px; height: auto; margin: 5px auto; } .accordion .content p { margin-bottom: 5px; color: #585858; text-shadow: 0 1px 1px #dcdcdc; }
相关文章推荐
- css 非表格垂直对齐效果代码
- CSS代码分享
- css+js实现select列表横向排列效果代码
- 纯css的accordion效果
- css 填坑常用代码分享
- CSS代码分享:浏览器CSS Reset方法十例
- jQuery实现的手机发送验证码倒计时效果代码分享
- 用CSS实现的图片透明度链接效果代码
- CSS 扑克牌效果实现代码
- js鼠标点击图片切换效果代码分享
- js钢琴按钮波浪式图片排列效果代码分享
- js鼠标点击图片切换效果代码分享
- JS+CSS实现简易的滑动门效果代码
- jquery衣服颜色选取插件效果代码分享
- CSS经验分享:如何书写可维护的CSS代码
- 分享一段图片抖动放大效果CSS3代码
- css 填坑常用代码分享
- CSS制作图形变形弹出效果的示例分享
- js带前后翻页的图片切换效果代码分享
- js淡入淡出焦点图幻灯片效果代码分享