超酷炫 CSS3垂直手风琴菜单

CSS3目前非常流行，在很多开发者看来，CSS3是制作网页动画和网页特效的神器，很多意想不到的效果都可以用CSS3实现。但是今天我们要分享一款用CSS3实现的非常普通的菜单，它是一个垂直的手风琴折叠菜单，先来看看效果图：

 实现代码如下：

XML/HTML Code 复制内容到剪贴板

<ul id="accordion" class="accordion">
 <li>
  <div class="link"><i class="fa fa-paint-brush">i>Diseño web<i 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-end<i 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 responsive<i 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 web<i 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);
});

本文链接：http://www.codeceo.com/article/css3-vertical-accordion-menu.html
本文作者：码农网 – 小峰

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。