当前位置：首页 > 网页特效 > 导航菜单

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

分类：导航菜单日期：2024-05-14 点击(1) 评论(0)

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

简介

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

```html
<section class="accordion">
     <div class="item">
          <img src="img/Location-Pin.png" alt="">
          <h3>Location</h3>
     </div>
      <p>.......</p>
      ......
 </section>     
```         
#####  CSS样式
该手风琴设置了固定的宽度，高度由手风琴项来控制。

```html
.accordion {
  margin: 50px auto;
  width: 380px;
  background: #ccc;
  cursor: pointer;
}
.accordion .item {
  height: 100px;
}            
```      
为了使标题和图标垂直居中显示，样式中使用h3元素的:before伪元素来撑开空间，标题h3和图片分别使用vertical-align: middle;属性来垂直居中。

```html
.accordion .item h3 {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  padding-left: 50px;
  font-family: "JF Flat Regular";
  font-size: 20px;
  font-weight: 400;
}
.accordion .item img {
  padding-left: 15px;
  width: 30px;
  vertical-align: middle;
}
.accordion .item h3:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}  
```               
样式中使用:first-of-type、:nth-of-type(n)和:last-of-type来为手风琴项设置不同的背景颜色，由于IE8浏览器不支持这些CSS属性，所以看不到颜色效果。如果要支持IE8，可以通过指定class或ID的方式来设置背景颜色。

```html
.accordion .item:first-of-type {
  background: #620808;
  color: #f4ce74;
}
.accordion .item:nth-of-type(2) {
  background: #a53f3f;
  color: #ffe9c1;
}
.accordion .item:nth-of-type(3) {
  background: #f4ce74;
  color: #620808;
}
.accordion .item:nth-of-type(4) {
  background: #ffe9c1;
  color: #d5441c;
}
.accordion .item:last-of-type {
  background: #d5441c;
  color: #ffe9c1;
}      
```            
最后，手风琴项中的内容使用p元素来制作，为p元素足够的padding值和内部阴影效果，并设置开始时为不可见的状态。同样它们的背景颜色也是用:first-of-type、:nth-of-type(n)和:last-of-type属性来分别进行设置。

```html
.accordion p {
  font-family: "JF Flat Regular";
  font-size: 18px;
  font-weight: 400;
  padding: 15px;
  display: none;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2);
}
.accordion p:first-of-type {
  background: #620808;
  color: #f4ce74;
}
.accordion p:nth-of-type(2) {
  background: #a53f3f;
  color: #ffe9c1;
}
.accordion p:nth-of-type(3) {
  background: #f4ce74;
  color: #620808;
}
.accordion p:nth-of-type(4) {
  background: #ffe9c1;
  color: #d5441c;
}
.accordion p:last-of-type {
  background: #d5441c;
  color: #ffe9c1;
}   
```               
#####  JavaScript
该手风琴使用jQuery代码来在用户点击手风琴项时滑动显示手风琴项。

```html
(function ($) {
    'use strict';
    $('.item').on("click", function () {
        $(this).next().slideToggle(100);
        $('p').not($(this).next()).slideUp('fast');
    });
}(jQuery));       
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果