超酷炫 CSS3垂直手风琴菜单

 padding: 15px 15px 15px 42px;   

 color: #4D4D4D;   

 font-size: 14px;   

 font-weight: 700;   

 border-bottom: 1px solid #CCC;   

 position: relative;   

 -webkit-transition: all 0.4s ease;   

 -o-transition: all 0.4s ease;   

 transition: all 0.4s ease;   

}   

.accordion li:last-child .link {   

 border-bottom: 0;   

}   

.accordion li i {   

 position: absolute;   

 top: 16px;   

 left: 12px;   

 font-size: 18px;   

 color: #595959;   

 -webkit-transition: all 0.4s ease;   

 -o-transition: all 0.4s ease;   

 transition: all 0.4s ease;   

}   

.accordion li i.fa-chevron-down {   

 rightright: 12px;   

 left: auto;   

 font-size: 16px;   

}   

.accordion li.open .link {   

 color: #b63b4d;   

}   

.accordion li.open i {   

 color: #b63b4d;   

}   

.accordion li.open i.fa-chevron-down {   

 -webkit-transform: rotate(180deg);   

 -ms-transform: rotate(180deg);   

 -o-transform: rotate(180deg);   

 transform: rotate(180deg);   

}   

/**  

 * Submenu  

 -----------------------------*/  

 .submenu {   

  display: none;   

  background: #444359;   

  font-size: 14px;   

 }   

 .submenu li {   

  border-bottom: 1px solid #4b4a5e;   

 }   

 .submenu a {   

  display: block;   

  text-decoration: none;   

  color: #d9d9d9;   

  padding: 12px;   

  padding-left: 42px;   

  -webkit-transition: all 0.25s ease;   

  -o-transition: all 0.25s ease;   

  transition: all 0.25s ease;   

 }   

 .submenu a:hover {   

  background: #b63b4d;   

  color: #FFF;   

 }    

jQuery代码：

JavaScript Code复制内容到剪贴板

 $(function() {   

 var Accordion = function(el, multiple) {   

  this.el = el || {};   

  this.multiple = multiple || false;   

  // Variables privadas   

  var links = this.el.find('.link');   

  // Evento   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!