导航菜单

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

阿里云


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

HTML 结构

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

也想出现在这里?联系我们
创客主机
  1. <div class="accordion-wrap">
  2.   <div class="accordion">
  3.     <a href="#" class="active"><i class="fa fa-user"></i> Profile</a>
  4.     <div class="sub-nav active">
  5.       <div class="html about-me">
  6.         <div class="photo">
  7.           <div class="photo-overlay">
  8.             <span class="plus">+</span>
  9.           </div>
  10.         </div>
  11.         <h4>......</h4>
  12.         <p>...</p>
  13.         <div class="social-link">
  14.           <a class="link link-twitter" href="#" target="_blank"><i class="fa fa-twitter"></i></a>
  15.           ...
  16.         </div>
  17.       </div>
  18.     </div>
  19.     <a href="#"><i class="fa fa-comments"></i> Chat</a>
  20.     <div class="sub-nav">
  21.       <div class="html chat">
  22.         <div class="user user-khadkamhn clearfix">
  23.           <span class="text-msg pull-right">...</span>
  24.         </div>
  25.         ...
  26.       </div>
  27.     </div>
  28.     <a href="#"><i class="fa fa-envelope"></i> Messages <span class="pull-right alert-numb">21</span></a>
  29.     <div class="sub-nav">
  30.       <a href="#">Inbox <span class="pull-right alert-numb">11</span></a>
  31.       ...
  32.     </div>
  33.     <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a>
  34.     <div class="sub-nav">
  35.       <div class="html invite">
  36.         <p>I would like to join <span class="dribbble">dribbble</span> community</p>
  37.         <p>Could you please invite me?</p>
  38.         <a class="btn" href="http://www.htmleaf.com/" target="_blank">Draft Me</a>
  39.       </div>
  40.     </div>
  41.   </div>
  42. </div>
  43. </div>

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

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

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

已有 351 人购买
查看演示升级 VIP立刻购买

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

发表回复

热销模板

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

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