CSS3垂直手风琴菜单

作者

对于开发者来说目前最流行的就是css3,，有很多想不到的效果都可以用CSS3实现，那么今天小编就将为大家分享用CSS3实现的垂直的手风琴折叠菜单。是不是很多用户们对CSS3垂直手风琴菜单感兴趣呢？

 实现代码如下：

XML/HTML Code
复制内容到剪贴板
  1. ul id=“accordion” class=“accordion”>  
  2.  li>  
  3.   div class=“link”>i class=“fa fa-paint-brush”>i>Diseño webi class=“fa fa-chevron-down”>i>div>  
  4.   ul class=“submenu”>  
  5.    li>a href=“#”>Photoshopa>li>  
  6.    li>a href=“#”>HTMLa>li>  
  7.    li>a href=“#”>CSSa>li>  
  8.    li>a href=“#”>Maquetacion weba>li>  
  9.   ul>  
  10.  li>  
  11.  li>  
  12.   div class=“link”>i class=“fa fa-code”>i>Desarrollo front-endi class=“fa fa-chevron-down”>i>div>  
  13.   ul class=“submenu”>  
  14.    li>a href=“#”>Javascripta>li>  
  15.    li>a href=“#”>jQuerya>li>  
  16.    li>a href=“#”>Frameworks javascripta>li>  
  17.   ul>  
  18.  li>  
  19.  li>  
  20.   div class=“link”>i class=“fa fa-mobile”>i>Diseño responsivei class=“fa fa-chevron-down”>i>div>  
  21.   ul class=“submenu”>  
  22.    li>a href=“#”>Tabletsa>li>  
  23.    li>a href=“#”>Dispositivos mobilesa>li>  
  24.    li>a href=“#”>Medios de escritorioa>li>  
  25.    li>a href=“#”>Otros dispositivosa>li>  
  26.   ul>  
  27.  li>  
  28.  li>div class=“link”>i class=“fa fa-globe”>i>Posicionamiento webi class=“fa fa-chevron-down”>i>div>  
  29.   ul class=“submenu”>  
  30.    li>a href=“#”>Googlea>li>  
  31.    li>a href=“#”>Binga>li>  
  32.    li>a href=“#”>Yahooa>li>  
  33.    li>a href=“#”>Otros buscadoresa>li>  
  34.   ul>  
  35.  li>  
  36. ul>  

CSS代码：

CSS Code
复制内容到剪贴板
  1.  .accordion {   
  2.   width: 100%;   
  3.   max-width: 360px;   
  4.   margin: 30px auto 20px;   
  5.   background: #FFF;   
  6.   -webkit-border-radius: 4px;   
  7.   -moz-border-radius: 4px;   
  8.   border-radius: 4px;   
  9.  }   
  10.   
  11. .accordion .link {   
  12.  cursor: pointer;   
  13.  display: block;   
  14.  padding: 15px 15px 15px 42px;   
  15.  color: #4D4D4D;   
  16.  font-size: 14px;   
  17.  font-weight: 700;   
  18.  border-bottom: 1px solid #CCC;   
  19.  position: relative;   
  20.  -webkit-transition: all 0.4s ease;   
  21.  -o-transition: all 0.4s ease;   
  22.  transition: all 0.4s ease;   
  23. }   
  24.   
  25. .accordion li:last-child .link {   
  26.  border-bottom: 0;   
  27. }   
  28.   
  29. .accordion li i {   
  30.  position: absolute;   
  31.  top: 16px;   
  32.  left: 12px;   
  33.  font-size: 18px;   
  34.  color: #595959;   
  35.  -webkit-transition: all 0.4s ease;   
  36.  -o-transition: all 0.4s ease;   
  37.  transition: all 0.4s ease;   
  38. }   
  39.   
  40. .accordion li i.fa-chevron-down {   
  41.  rightright: 12px;   
  42.  left: auto;   
  43.  font-size: 16px;   
  44. }   
  45.   
  46. .accordion li.open .link {   
  47.  color: #b63b4d;   
  48. }   
  49.   
  50. .accordion li.open i {   
  51.  color: #b63b4d;   
  52. }   
  53. .accordion li.open i.fa-chevron-down {   
  54.  -webkit-transform: rotate(180deg);   
  55.  -ms-transform: rotate(180deg);   
  56.  -o-transform: rotate(180deg);   
  57.  transform: rotate(180deg);   
  58. }   
  59.   
  60. /**  
  61.  * Submenu  
  62.  —————————–*/  
  63.  .submenu {   
  64.   display: none;   
  65.   background: #444359;   
  66.   font-size: 14px;   
  67.  }   
  68.   
  69.  .submenu li {   
  70.   border-bottom: 1px solid #4b4a5e;   
  71.  }   
  72.   
  73.  .submenu a {   
  74.   display: block;   
  75.   text-decoration: none;   
  76.   color: #d9d9d9;   
  77.   padding: 12px;   
  78.   padding-left: 42px;   
  79.   -webkit-transition: all 0.25s ease;   
  80.   -o-transition: all 0.25s ease;   
  81.   transition: all 0.25s ease;   
  82.  }   
  83.   
  84.  .submenu a:hover {   
  85.   background: #b63b4d;   
  86.   color: #FFF;   
  87.  }    

jQuery代码：

JavaScript Code
复制内容到剪贴板
  1.  $(function() {   
  2.  var Accordion = function(el, multiple) {   
  3.   this.el = el || {};   
  4.   this.multiple = multiple || false;   
  5.   
  6.   // Variables privadas   
  7.   var links = this.el.find(‘.link’);   
  8.   // Evento   
  9.   links.on(‘click’, {el: this.el, multiple: this.multiple}, this.dropdown)   
  10.  }   
  11.   
  12.  Accordion.prototype.dropdown = function(e) {   
  13.   var $el = e.data.el;   
  14.    $this = $(this),   
  15.    $next = $this.next();   
  16.   
  17.   $next.slideToggle();   
  18.   $this.parent().toggleClass(‘open’);   
  19.   
  20.   if (!e.data.multiple) {   
  21.    $el.find(‘.submenu’).not($next).slideUp().parent().removeClass(‘open’);   
  22.   };   
  23.  }    
  24.   
  25.  var accordion = new Accordion($(‘#accordion’), false);   
  26. });    
  27.   

以上就是小编介绍CSS3垂直手风琴菜单的内容，小伙伴们有兴趣的自己动手尝试一下哦，更多精彩内容就在爱站技术频道。