下载: http://sc.chinaz.com/jiaoben/141027501240.htm
html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3垂直手风琴折叠菜单</title> 6 <!-- Iconos --> 7 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">// 引用外部在线图标 8 <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> 9 </head> 10 <body> 11 <!-- Contenedor --> 12 <ul id="accordion" class="accordion"> 13 <li> 14 <div class="link"><i class="fa fa-paint-brush"></i>个人信息<i class="fa fa-chevron-down"></i></div> 15 <ul class="submenu"> 16 <li><a href="#">Photoshop</a></li> 17 <li><a href="#">HTML</a></li> 18 <li><a href="#">CSS</a></li> 19 <li><a href="#">Maquetacion web</a></li> 20 </ul> 21 </li> 22 <li> 23 <div class="link"><i class="fa fa-code"></i>文章管理<i class="fa fa-chevron-down"></i></div> 24 <ul class="submenu"> 25 <li><a href="#">Javascript</a></li> 26 <li><a href="#">jQuery</a></li> 27 <li><a href="#">Frameworks javascript</a></li> 28 </ul> 29 </li> 30 </ul> 31 <script src='js/jquery.js'></script> 32 <script src="js/index.js"></script> 33 </div> 34 </body> 35 </html>
css js 见下载文件
效果:
ok