【html】【18】高级篇--下拉列表[竖向手风琴]

下载: 　　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

posted @ 2015-12-12 17:21  阿亮的笔记  阅读(767)  评论(0)  编辑  收藏  举报