手风琴

CSS3扁平风格垂直手风琴UI设计

阿里云


这是一款使用 CSS3 和少量 jQuery 代码来制作的炫酷扁平风格垂直手风琴 UI 设计效果。该手风琴通过色彩和阴影效果来展现 Material Design 的设计风格,时尚大方。

HTML 结构

该垂直手风琴使用一个<section>元素来作为包裹容器,它里面的每一个 div.item 是一个手风琴项。div 元素之后紧跟的<p>元素是该手风琴项的文本内容。

也想出现在这里?联系我们
创客主机
  1. <section class="accordion">
  2.      <div class="item">
  3.           <img src="img/Location-Pin.png" alt="">
  4.           <h3>Location</h3>
  5.      </div>
  6.       <p>.......</p>
  7.       ......
  8.  </section>

CSS 样式

该手风琴设置了固定的宽度,高度由手风琴项来控制。

  1. .accordion {
  2.   margin: 50px auto;
  3.   width: 380px;
  4.   background: #ccc;
  5.   cursor: pointer;
  6. }
  7. .accordion .item {
  8.   height: 100px;
  9. }

为了使标题和图标垂直居中显示,样式中使用<h3>元素的:before 伪元素来撑开空间,标题 h3 和图片分别使用 vertical-align: middle;属性来垂直居中。

  1. .accordion .item h3 {
  2.   display: inline-block;
  3.   vertical-align: middle;
  4.   height: 100%;
  5.   padding-left: 50px;
  6.   font-family: "JF Flat Regular";
  7.   font-size: 20px;
  8.   font-weight: 400;
  9. }
  10. .accordion .item img {
  11.   padding-left: 15px;
  12.   width: 30px;
  13.   vertical-align: middle;
  14. }
  15. .accordion .item h3:before {
  16.   content: "";
  17.   display: inline-block;
  18.   vertical-align: middle;
  19.   height: 100%;
  20. }

样式中使用:first-of-type、:nth-of-type(n)和:last-of-type 来为手风琴项设置不同的背景颜色,由于 IE8 浏览器不支持这些 CSS 属性,所以看不到颜色效果。如果要支持 IE8,可以通过指定 class 或 ID 的方式来设置背景颜色。

  1. .accordion .item:first-of-type {
  2.   background: #620808;
  3.   color: #f4ce74;
  4. }
  5. .accordion .item:nth-of-type(2) {
  6.   background: #a53f3f;
  7.   color: #ffe9c1;
  8. }
  9. .accordion .item:nth-of-type(3) {
  10.   background: #f4ce74;
  11.   color: #620808;
  12. }
  13. .accordion .item:nth-of-type(4) {
  14.   background: #ffe9c1;
  15.   color: #d5441c;
  16. }
  17. .accordion .item:last-of-type {
  18.   background: #d5441c;
  19.   color: #ffe9c1;
  20. }

最后,手风琴项中的内容使用<p>元素来制作,为<p>元素足够的 padding 值和内部阴影效果,并设置开始时为不可见的状态。同样它们的背景颜色也是用:first-of-type、:nth-of-type(n)和:last-of-type 属性来分别进行设置。

  1. .accordion p {
  2.   font-family: "JF Flat Regular";
  3.   font-size: 18px;
  4.   font-weight: 400;
  5.   padding: 15px;
  6.   display: none;
  7.   box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2);
  8. }
  9. .accordion p:first-of-type {
  10.   background: #620808;
  11.   color: #f4ce74;
  12. }
  13. .accordion p:nth-of-type(2) {
  14.   background: #a53f3f;
  15.   color: #ffe9c1;
  16. }
  17. .accordion p:nth-of-type(3) {
  18.   background: #f4ce74;
  19.   color: #620808;
  20. }
  21. .accordion p:nth-of-type(4) {
  22.   background: #ffe9c1;
  23.   color: #d5441c;
  24. }
  25. .accordion p:last-of-type {
  26.   background: #d5441c;
  27.   color: #ffe9c1;
  28. }

JavaScript

该手风琴使用 jQuery 代码来在用户点击手风琴项时滑动显示手风琴项。

  1. (function ($) {
  2.     'use strict';
  3.     $('.item').on("click", function () {
  4.         $(this).next().slideToggle(100);
  5.         $('p').not($(this).next()).slideUp('fast');
  6.     });
  7. }(jQuery));

CSS3 扁平风格垂直手风琴 UI 设计

已有 503 人购买
  • cecj
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!