用CSS怎样编辑垂直手风琴菜单 代码是什么

在实际应用中，我们有时候会遇到“用CSS怎样写垂直手风琴菜单，代码是什么”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“用CSS怎样写垂直手风琴菜单，代码是什么”文章能帮助大家解决问题。

实现代码如下：

XML/HTML Code 

ul id="accordion" class="accordion">  

 li>  

  div class="link">i class="fa fa-paint-brush">i>Diseño webi class="fa fa-chevron-down">i>div>  

  ul class="submenu">  

   li>a href="#">Photoshopa>li>  

   li>a href="#">HTMLa>li>  

   li>a href="#">CSSa>li>  

   li>a href="#">Maquetacion weba>li>  

  ul>  

 li>  

 li>  

  div class="link">i class="fa fa-code">i>Desarrollo front-endi class="fa fa-chevron-down">i>div>  

  ul class="submenu">  

   li>a href="#">Javascripta>li>  

   li>a href="#">jQuerya>li>  

   li>a href="#">Frameworks javascripta>li>  

  ul>  

 li>  

 li>  

  div class="link">i class="fa fa-mobile">i>Diseño responsivei class="fa fa-chevron-down">i>div>  

  ul class="submenu">  

   li>a href="#">Tabletsa>li>  

   li>a href="#">Dispositivos mobilesa>li>  

   li>a href="#">Medios de escritorioa>li>  

   li>a href="#">Otros dispositivosa>li>  

  ul>  

 li>  

 li>div class="link">i class="fa fa-globe">i>Posicionamiento webi class="fa fa-chevron-down">i>div>  

  ul class="submenu">  

   li>a href="#">Googlea>li>  

   li>a href="#">Binga>li>  

   li>a href="#">Yahooa>li>  

   li>a href="#">Otros buscadoresa>li>  

  ul>  

 li>  

ul>  

CSS代码：

CSS Code 

 .accordion {  

  width: 100%;  

  max-width: 360px;  

  margin: 30px auto 20px;  

  background: #FFF;  

  -webkit-border-radius: 4px;  

  -moz-border-radius: 4px;  

  border-radius: 4px;  

 }  

.accordion .link {  

 cursor: pointer;  

 display: block;  

 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   

  links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)  

 }  

 Accordion.prototype.dropdown = function(e) {  

  var $el = e.data.el;  

   $this = $(this),  

   $next = $this.next();  

  $next.slideToggle();  

  $this.parent().toggleClass('open');  

  if (!e.data.multiple) {  

   $el.find('.submenu').not($next).slideUp().parent().removeClass('open');  

  };  

 }   

 var accordion = new Accordion($('#accordion'), false);  

});   

感谢各位的阅读，以上就是“用CSS怎样写垂直手风琴菜单，代码是什么”的内容了，经过本文的学习后，相信大家对用CSS怎样写垂直手风琴菜单，代码是什么都有更深刻的体会了吧。

（编辑：银川站长网）

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