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

FAQs问答垂直手风琴列表UI设计效果

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

FAQs问答垂直手风琴列表UI设计效果

简介

##### HTML结构
该FAQs垂直手风琴的HTML结构使用一个容器来包裹一个有序列表。

```html
<div class="container">
  <dl>
    <dt>标题</dt>
    <dd>
      <p>内容......</p>
      <p>内容......</p>
    </dd>
    ......
  </dl>
</div>
```
#####  CSS样式
该FAQs垂直手风琴的样式也非常简单。列表前面的小三角形使用dt元素的:before伪元素来制作。

```html
dt:before {
  content: "";
  border-color: transparent #ccc;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  display: block;
  height: 0;
  width: 0;
  left: -16px;
  top: 17px;
  position: relative;
}
```
内容面板的提示框三角形使用dd元素的:before和:after伪元素来制作。

```html
dd:after, dd:before {
  bottom: 100%;
  left: 6%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
 
dd:after {
  border-color: rgba(136, 183, 213, 0);
  border-color: transparent;
  border-bottom-color: #FDFCFA;
  border-width: 15px;
  margin-left: -15px;
}
 
dd:before {
  border-color: rgba(194, 225, 245, 0);
  border-color: transparent;
  border-bottom-color: #F2EEE6;
  border-width: 17px;
  margin-left: -17px;
}
```
#####  JavaScript
手风琴列表的切换通过jQuery的slideToggle()方法来实现。

```html
(function(){
  
$('dd').filter(':nth-child(n+4)').addClass('hide');
 
$('dl').on('click', 'dt', function() {
    $(this).next().slideToggle(200);
  });
 
})();       
```

web299.com

FAQs问答垂直手风琴列表UI设计效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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