超酷炫 CSS3垂直手风琴菜单

前端  /  管理员 发布于 7年前   224

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 web<i class="fa fa-chevron-down"></i></div>  
4.   <ul class="submenu">  
5.    <li><a href="#">Photoshop</a></li>  
6.    <li><a href="#">HTML</a></li>  
7.    <li><a href="#">CSS</a></li>  
8.    <li><a href="#">Maquetacion web</a></li>  
9.   </ul>  
10.  </li>  
11.  <li>  
12.   <div class="link"><i class="fa fa-code"></i>Desarrollo front-end<i class="fa fa-chevron-down"></i></div>  
13.   <ul class="submenu">  
14.    <li><a href="#">Javascript</a></li>  
15.    <li><a href="#">jQuery</a></li>  
16.    <li><a href="#">Frameworks javascript</a></li>  
17.   </ul>  
18.  </li>  
19.  <li>  
20.   <div class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></div>  
21.   <ul class="submenu">  
22.    <li><a href="#">Tablets</a></li>  
23.    <li><a href="#">Dispositivos mobiles</a></li>  
24.    <li><a href="#">Medios de escritorio</a></li>  
25.    <li><a href="#">Otros dispositivos</a></li>  
26.   </ul>  
27.  </li>  
28.  <li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div>  
29.   <ul class="submenu">  
30.    <li><a href="#">Google</a></li>  
31.    <li><a href="#">Bing</a></li>  
32.    <li><a href="#">Yahoo</a></li>  
33.    <li><a href="#">Otros buscadores</a></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.   

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

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