下载: 　　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. 射频识别技术漫谈(10)——识别号的格式变化【worldsing笔记】

    从事RDID行业的朋友经常会遇到这样的情况,同一张ID卡,在不同厂家生产的读卡器上读出的识别号完全不一样,有时甚至差之千里.ID卡的识别号一般是在出厂时被固化在卡片的ROM里,本身是不会改变的,问题出 ...

  2. Shell 脚本学习资料搜集

    Shell文档 ChinaUnix上大神“網中人”总结的Shell十三问,强烈推荐,这本书讲得比较精炼,而且都是一些Shell学习中容易把握不住的一些细节难点.每一问都写得非常精彩.ChinaUnix ...

  3. Android模拟器访问本地的apache tomcat服务

    1. 在官网http://tomcat.apache.org/上下载tomcat,根据自己的电脑下载相应的文件 2.将apache-tomcat-6.0.37-windows-x64.zip包解压到本 ...

  4. UI进阶 数据处理之文件读写

    目录: 1-------沙盒机制(SandBox) 2-------简单对象的读写(I/O)操作 3-------复杂对象的读写(I/O)操作 一.沙盒机制(SandBox) 什么是沙盒:每个iOS应 ...

  5. BootStrap最常用的几个插件（V3.3.0版）

    1.标签页 <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> < ...

  6. 有return的情况下try catch finally的执行顺序（最有说服力的总结）

    结论:1.不管有木有出现异常,finally块中代码都会执行:2.当try和catch中有return时,finally仍然会执行:3.finally是在return后面的表达式运算后执行的(此时并没 ...

  7. c# 泛型List的定义、作用、用法

    定义:List<T>类表示可通过索引访问的对象的强类型列表,提供用于对列表进行搜索.排序和操作的方法. 作用: 泛型最常见的用途是泛型集合 我们在创建列表类时,列表项的数据类型可能是int ...

  8. 03---JavaScript基础整理

    一.概述:           Netscape开发的一种基于对象和事件驱动的脚本语言.                  被设计用来想HTML页面添加交互行为.           无需编译,可由浏 ...

  9. [原创]javascript prototype 对象　函数 <精简的美丽......>

    精简的美丽...... javascript prototype 对象 函数 在javascript中我们都知道创建一个对象使用如下代码var x = {}对象可以拥有属性和方法var x = {   ...

  10. JQuery图片滑动插件

    效果预览: (暂无) html代码: <div id="focus"> <ul> <li> <a href="#"&g ...