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

时间：2021-12-19 19:46:24

下载: 　　http://sc.chinaz.com/jiaoben/141027501240.htm

html:

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="UTF-8">

   <title>CSS3垂直手风琴折叠菜单</title>

     <!-- Iconos -->

     <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">// 引用外部在线图标

     <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

 </head>

 <body>

     <!-- Contenedor -->

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

         <li>

             <div class="link"><i class="fa fa-paint-brush"></i>个人信息<i class="fa fa-chevron-down"></i></div>

             <ul class="submenu">

                 <li><a href="#">Photoshop</a></li>

                 <li><a href="#">HTML</a></li>

                 <li><a href="#">CSS</a></li>

                 <li><a href="#">Maquetacion web</a></li>

             </ul>

         </li>

         <li>

             <div class="link"><i class="fa fa-code"></i>文章管理<i class="fa fa-chevron-down"></i></div>

             <ul class="submenu">

                 <li><a href="#">Javascript</a></li>

                 <li><a href="#">jQuery</a></li>

                 <li><a href="#">Frameworks javascript</a></li>

             </ul>

         </li>

     </ul>

   <script src='js/jquery.js'></script>

   <script src="js/index.js"></script>

 </div>

 </body>

 </html>

css js 见下载文件

效果:

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

ok

相关文章