下载: 　　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. C#中的强类型说明

    转载原地址: http://www.cnblogs.com/JeffreyZhao/archive/2009/02/27/mvc-use-strong-type-everywhere.html 我们继 ...

  2. VS2015开发环境配置

    1.安装VS2015 Professional(专业版),按需勾选必要项(VC.C#.WEB.GIT) Visual Basic 2015 00322-50050-03552-AA642Microso ...

  3. KEEPALIVED 检测RS原理

    keepalived管理的的ipvs功能支持对后端节点真实服务器的健康检查 一般常用的方式包括tcp_check 和http_get(更准确) tcp_check 原理就是对真实服务器进行ip+端口的 ...

  4. MySQL 常用语句 （汇集）

    原文地址:MySql常用语句作者:wuyanle 一.mysql常用语句 创建,删除和最基本查询: 显示数据库  mysql->show databases; 创建数据库  mysql-> ...

  5. PS自定义对象二_PSCustomObject

    创建自定义对象 $obj = [pscustomobject]@{a=1;b="";c=$null} % 选择属性列 $obj | gm |  % definition ( $ob ...

  6. iOS开发笔记系列-基础1(数据类型与表达式)

    学习iOS开发快两年了,去年完成MagViewer之后就因为公司的其他业务繁重,除了维护这个应用之外,只是断断续续地自己做一些实验开发,没有再发布新的应用,这里想整理一下学习过程中的笔记,以便加深印象 ...

  7. android常见错误-

    将library中的报错项删除,然后点击[add]正确的appcompat

  8. Windows7中Emacs 24 shell使用Gitbash

    今天发现可以在shell中直接打开Gitbash,Gitbash提供了一些有用的Linux风格命令,最关键是我用emacs的时候不用再打开一个Gitbash终端操纵Git了. 在~/.emacs.d/ ...

  9. Validation

    Validation A simple but powerful Validation Engine, in a Laravel-esque style. Its Validation Rules a ...

  10. Routing and controllers

    Routing and controllers We will build a very simple inventory system to display our album collection ...