下载: 　　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 见下载文件

效果:

ok

【html】【18】高级篇--下拉列表[竖向手风琴]的更多相关文章

  1. Python3学习(3)-高级篇

    Python3学习(1)-基础篇 Python3学习(2)-中级篇 Python3学习(3)-高级篇 文件读写 源文件test.txt line1 line2 line3 读取文件内容 f = ope ...

  2. PHP笔记（PHP高级篇）

    高级篇中将涉及数据库的使用以及Cookie和Session会话,提高PHP的开发效率和运行效率 PHP程序员需要掌握的MySQL操作 为项目设计表 使用SQL语句 MySQL的目录结构 data目录中 ...

  3. 《JavaScript网页特效经典300例-高级篇》

    <Javascript网页经典特性300例> 高级篇 第18章:ajax应用 Ajax传输JSON数据实例定义一套自己的Ajax框架 第19章:面向对象的特性 定义一个类利用prototy ...

  4. 从零开始学Axure原型设计（高级篇）

    如果你熟悉了Axure的部件库,那么你可以得心应手地画出心目中产品的线框图:如果你会用Axure的母版.动态面板功能,那么你应该能够画出一些简单网站的原型图:但只有你精通了Axure的条件逻辑.变量. ...

  5. Kotlin——从无到有系列之高级篇（一）：Lambda表达式

    如果您对Kotlin很有兴趣,或者很想学好这门语言,可以关注我的掘金,或者进入我的QQ群大家一起学习.进步. 欢迎各位大佬进群共同研究.探索 QQ群号:497071402 进入正题 经过前面一系列对K ...

  6. MyBatis高级篇之整合ehcache缓存框架

    MyBatis高级篇之整合ehcache缓存框架  2017-09-01  0 Comments  1,671 Views  0 Times 一.前言 MyBatis为我们提供了Cache接口,也提供 ...

  7. Kotlin——高级篇（五）：集合之常用操作符汇总

    在上一篇文章Kotlin--高级篇(四):集合(Array.List.Set.Map)基础中讲解到了数组Array<T>.集合(List.Set.Map)的定义与初始化.但是由于篇幅的原因 ...

  8. Kotlin——高级篇（二）：高阶函数详解与标准的高阶函数使用

    在上面一个章节中,详细的讲解了Kotlin中关于Lambda表达式的语法以及运用,如果还您对其还不甚理解,请参见Kotlin--高级篇(一):Lambda表达式详解.在这篇文章中,多次提到了Kotli ...

  9. JavaScript高级篇之Function对象

    JavaScript高级篇之Function对象 一: Function对象引入: Function对象是js的方法对象,可以用Function实例化出任何js方法对象. 例如: <%@ pag ...

随机推荐

  1. 【3D研发笔记】之【数学相关】（一）：坐标系

    现在开始学习3D基础相关的知识,本系列的数学相关笔记是基于阅读书籍<3D数学基础:图形与游戏开发>而来,实现代码使用AS3,项目地址是:https://github.com/hammerc ...

  2. centos 卸载自带的 java

    一般情况下,我们都要将linux自带的OPENJDK卸载掉,然后安装SUN的JDK 首先:查看Linux自带的JDK是否已安装     <1># java -version        ...

  3. 安卓开发21：深入理解Handler

    Handler相关说明: 主要接受子线程发送的数据, 并用此数据配合主线程更新UI. 解释:安卓的UI线程(即OnCreate函数创建的线程)是线程非安全的.也就是说,在UI线程中,使用sleep这样 ...

  4. iOS 获取当前月份的天数(转)、

    转:http://www.cnblogs.com/kingbo/p/3966855.html . 获取当前月份有多少天 NSCalendar *calendar = [NSCalendarcurren ...

  5. 更改OS序列号(slmgr)

    slmgr /ipk 489j-abc-def-hij-mnn slmgr /skms 8.8.8.8:1688 slmgr /ato

  6. 【39】明智而审慎第使用private继承

    1.private继承意味着,根据某物实现出,继承父类的实现,关闭父类的接口,并不是Is-A的关系,不满足里氏代换,继承的内容访问权限都修改为private. 2.那么问题来了,复合也表达根据某物实现 ...

  7. 9个使用前必须再三小心的Linux命令

      Linux shell/terminal 命令非常强大,即使一个简单的命令就可能导致文件夹.文件或者路径文件夹等被删除.在一些情况下,Linux 甚至不会询问你而直接执行命令,导致你丢失各种数据信 ...

  8. 详解 MySQL 中的 explain

    来源:persister 链接:http://www.blogjava.net/persister/archive/2008/10/27/236813.html 在 explain的帮助下,您就知道什 ...

  9. 获取设置dom属性

    getAttribute():获取dom节点属性,带一个参数,表示要获取的属性使用方法:object.getAttribute("id"); setAttribute():设置do ...

  10. Linux添加环境变量与GCC编译器添加INCLUDE与LIB环境变量

    对所有用户有效在/etc/profile增加以下内容.只对当前用户有效在Home目录下的.bashrc或.bash_profile里增加下面的内容:(注意:等号前面不要加空格,否则可能出现 comma ...