时尚垂直手风琴内容列表UI设计

当前位置:主页 > CSS3库 > UI界面设计 > 时尚垂直手风琴内容列表UI设计
时尚垂直手风琴内容列表UI设计
分享:

    插件介绍

    这是一款使用CSS3和jQuery制作的时尚垂直手风琴内容列表UI设计效果。该垂直手风琴列表整体设计非常简洁,内容排版合理,给用户的体验效果非常的好。

    浏览器兼容性

    浏览器兼容性
    时间:08-17
    阅读:
简要教程

这是一款使用CSS3jQuery制作的时尚垂直手风琴内容列表UI设计效果。该垂直手风琴列表整体设计非常简洁,内容排版合理,给用户的体验效果非常的好。

使用方法

HTML结构

该手风琴UI的HTML结构如下:

<div class="accordion-wrap">
  <div class="accordion">
    <a href="#" class="active"><i class="fa fa-user"></i> Profile</a>
    <div class="sub-nav active">
      <div class="html about-me">
        <div class="photo">
          <div class="photo-overlay">
            <span class="plus">+</span>
          </div>
        </div>
        <h4>......</h4>
        <p>...</p>
        <div class="social-link">
          <a class="link link-twitter" href="#" target="_blank"><i class="fa fa-twitter"></i></a>
          ...
        </div>
      </div>
    </div>
    <a href="#"><i class="fa fa-comments"></i> Chat</a>
    <div class="sub-nav">
      <div class="html chat">
        <div class="user user-khadkamhn clearfix">
          <span class="text-msg pull-right">...</span>
        </div>
        ...
      </div>
    </div>
    <a href="#"><i class="fa fa-envelope"></i> Messages <span class="pull-right alert-numb">21</span></a>
    <div class="sub-nav">
      <a href="#">Inbox <span class="pull-right alert-numb">11</span></a>
      ...
    </div>
    <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a>
    <div class="sub-nav">
      <div class="html invite">
        <p>I would like to join <span class="dribbble">dribbble</span> community</p>
        <p>Could you please invite me?</p>
        <a class="btn" href="http://www.htmleaf.com/" target="_blank">Draft Me</a>
      </div>
    </div>
  </div>
</div>
</div>             
              

下面是该垂直手风琴效果的一些截图:

垂直手风琴效果-1

垂直手风琴效果-2

具体的CSS和jQuery实现代码请参考下载文件。