下载: 　　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. 转载LINQ TO Entity 在数据库发生更改时更新实体数据模型 .edmx 文件

    转载原出处:http://blog.csdn.net/litao2/article/details/8629335 在“模型浏览器”中,右击 .edmx 文件,然后选择“从数据库更新模型”. 模型更新 ...

  2. [置顶] 【cocos2d-x入门之五】导演类CCDirector

    原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12646337 既然cocos2d-x都帮我们封装好了,使得开发与平台无关,那 ...

  3. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  4. Cocos2d-x 3.x学习笔记（一）：开始Cocos2d之旅

    首先,进入官网下载cocos2d-x:http://www.cocos.com/download/,当然你需要注册一个账号才可以下载. 接下来需要跟着官网的配置文档配置一下开发环境,不得不说,Coco ...

  5. php中带mb的字符串处理函数

    int strlen ( string $string ) int mb_strlen ( string $str [, string $encoding ] ) encoding参数为字符编码.如果 ...

  6. （转）java读取数据库表信息，子段

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  7. Dev 等待提示 WaitDialogForm 升级版

    本文转载:http://www.cnblogs.com/VincentLuo/archive/2011/12/24/2298916.html   一.Dev的等待提示框                 ...

  8. Aizu 2305 Beautiful Currency DP

    Beautiful Currency Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest ...

  9. hdu 5446 Unknown Treasure lucas和CRT

    Unknown Treasure Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...

  10. procps工具集 ----Linux中的可用内存指的是什么？

    https://gitlab.com/procps-ng/procps free - Report the amount of free and used memory in the system k ...