1：Html代码

<li>

<label for="subsubfolder1">下级</label>

<input id="subsubfolder1" type="checkbox" />

<ol>

<li class="file"><a>下级</a></li>

<li>

<label for="subsubfolder2">下级</label>

<input id="subsubfolder2" type="checkbox" />

<ol>

<li class="file"><a>无限级</a></li>

<li class="file"><a>无限级</a></li>

<li class="file"><a>无限级</a></li>

<li class="file"><a>无限级</a></li>

<li class="file"><a>无限级</a></li>

<li class="file"><a>无限级</a></li>

</ol>

</li>

</ol>

</li>


实现的思路是运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的CSS。（很强大是吧。有了CSS3我们会少写很多JS哦！）
<label for="subsubfolder1">下级</label><input id="subsubfolder1" type="checkbox" />

当checkbox的拥有checked值的时候就就让OL现实出来，达到我们想要的功能。
接下来看看CSS代码吧：

li input {

position:absolute;left:0;margin-left:0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;

}

input + ol {

display:none;

}

input + ol > li {

height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px;

}

li label {

cursor:pointer;display:block;padding-left:17px;background:url(toggle-small-expand.png) no-repeat 0px 1px;

}

input:checked + ol {

background:url(toggle-small.png) 44px 5px no-repeat;margin:-22px 0 0 -44px;padding:27px 0 0 80px;height:auto;display:block;

}

input:checked + ol > li {

height:auto;

}


这段代码是树状菜单的中心：
input:checked + ol {

background: url(toggle-small.png) 44px 5px no-repeat;margin: -22px 0 0 -44px;padding:27px 0 0 80px;height: auto;display: block;

}

这个是讲当inoput 拥有了checked后它平级的OL拥有的样式。
查看DEMO
使用IE9以下浏览就不用看了，请使用非IE浏览器。
（想让IE6+浏览器支持也是可以滴，但是需要加JS来模拟css3属性。国外有很多牛人都写了让IE6+浏览器支持部分CSS3的JS，例如PIE）
总结：
总体来说，实现思路很简单，主要是利用CSS3的 checked
伪类来实现OL的隐藏显示。不过遗憾的是IE游览器不支持CSS3，但我们不能因为IE的不支持而放弃对CSS3的研究。在国外CSS3和HTML5都是
前端很热门的话题，他们研究的东西远远超过我们，但国内真正去尝试的还是不多，对于一个前端开发人员来说是一件很可悲的事。我认为CSS3应该引起我们的
重视，不能让我们输在起跑线。让我们大家一起来推动CSS3的发展吧。

2：实例源代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>纯CSS可折叠树状菜单</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<style type="text/css">

	body, ul, li{margin: 0;padding: 0;}

	body { background-color:#e4e9f1; color:#002446; margin: 0; }

	input, select, textarea, th, td { font-size: 1em; }

	ol.tree {padding: 0 0 0 30px;width: 300px;}

	li {position: relative;margin-left: -15px;list-style: none;}

	li.file{margin-left: -18px !important;}

	li.file a{background: url(document.png) 0 0 no-repeat;color: #002446;padding-left: 21px;text-decoration:none;display: block;}

	li input{position: absolute;left: 0;margin-left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}

	input + ol{display: none;}

	input + ol > li { height: 0; overflow: hidden; margin-left: -14px !important; padding-left: 1px; }

	li label {cursor: pointer;display: block;padding-left: 17px;background: url(toggle-small-expand.png) no-repeat 0px 1px;}

	input:checked + ol {background: url(toggle-small.png) 44px 5px no-repeat;margin: -22px 0 0 -44px;padding:27px 0 0 80px;height: auto;display: block;}

	input:checked + ol > li { height: auto;}

</style>

</head>

<body>

	<ol class="tree">

		<li>

			<label for="folder1">水产养殖</label> <input type="checkbox"  id="folder1" checked="checked" />

			<ol>

				<li class="file"><a href="#">实时数据</a></li>

				<li>

					<label for="subfolder1">实时数据</label> <input type="checkbox" id="subfolder1" />

					<ol>

						<li class="file"><a href="">下级</a></li>

						<li>

							<label for="subsubfolder1">下级</label> <input type="checkbox" id="subsubfolder1" />

							<ol>

								<li class="file"><a href="">下级</a></li>

								<li>

									<label for="subsubfolder2">下级</label> <input type="checkbox" id="subsubfolder2" />

									<ol>

										<li class="file"><a href="">无限级</a></li>

										<li class="file"><a href="">无限级</a></li>

										<li class="file"><a href="">无限级</a></li>

										<li class="file"><a href="">无限级</a></li>

										<li class="file"><a href="">无限级</a></li>

										<li class="file"><a href="">无限级</a></li>

									</ol>

								</li>

							</ol>

						</li>

						<li class="file"><a href="">下级</a></li>

						<li class="file"><a href="">下级</a></li>

						<li class="file"><a href="">下级</a></li>

						<li class="file"><a href="">下级</a></li>

					</ol>

				</li>

			</ol>

		</li>

		<li>

			<label for="folder2">水产养殖</label> <input type="checkbox" id="folder2" />

			<ol>

				<li class="file"><a href="">实时数据</a></li>

				<li>

					<label for="subfolder2">实时数据</label> <input type="checkbox" id="subfolder2" />

					<ol>

						<li class="file"><a href="">下级</a></li>

						<li class="file"><a href="">下级</a></li>

						<li class="file"><a href="">下级</a></li>

						<li class="file"><a href="">下级</a></li>

						<li class="file"><a href="">下级</a></li>

						<li class="file"><a href="">下级</a></li>

					</ol>

				</li>

			</ol>

		</li>

	</ol>

</body>

</html>

3：效果图

纯CSS打造可折叠树状菜单的更多相关文章

  1. 学用纯CSS打造可折叠树状菜单

    随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习.但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个 ...

  2. 学用纯CSS3打造可折叠树状菜单

    CSS执行顺序与优先权的问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其中涉及到的问题其实很多.首先就是CSS规则的specific ...

  3. 自写JQ控件-树状菜单控件[demo下载]

    一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...

  4. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  5. Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform

    Expression构建DataTable to Entity 映射委托   1 namespace Echofool.Utility.Common { 2 using System; 3 using ...

  6. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 菜鸟笔记：node.js+mysql中将JSON数据构建为树（递归制作树状菜单数据接口）

    初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...

  8. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  9. C#winform菜单权限分配，与菜单同步的treeView树状菜单权限控制使用心得

    在网上查了很多,发现没有讲述关于--C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用--的资料 自己研究了一个使用方法.下面来看看. 我有两个窗体:LOGINFRM,M ...

随机推荐

  1. Android Studio使用SVN，与eclipse共同开发。

    Android Studio(下称AS)开发工具目前已经迅速在世界普遍使用起来,而在很多一部分公司内部,仍然有部分老员工坚持使用eclipse + SVN,而不改用AS,这使得想使用AS的小伙伴们都深 ...

  2. 让IE支持Css3属性（圆角、阴影、渐变）

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  3. 浅谈Mamcached集成web项目

    1.资源文件配置 config.properties 添加 #memcached服务器地址 memchchedIP=192.168.1.8 2.编写工具类 MemUtils package cn.co ...

  4. javascript类继承系列一

    js中没有提供类(class,抽象类,接口等高级的抽象),可以用new,但new的function的对象,构造器 但在js中可以通过function来模拟类的一些特性function fun_name ...

  5. Java 对象属性的遍历

    package com.cn.mybatis.test; import java.io.IOException; import java.io.InputStream; import java.lan ...

  6. C# 静态类和非静态类的区别

    静态类和非静态类的区别 静态类: static       关键字 调用 类名.方法 在静态方法中只能访问静态成员  在静态类中只能有静态成员 在非静态类中 即可有非静态成员,也可以有静态成员 在静态 ...

  7. iOS中常用的第三方

    1. ZBarSDK 二维码.条形码 http://www.cnblogs.com/qingche/p/4242129.html

  8. libConfuse的使用

    前言 在软件编程中经常会使用到一些参数,在存储方面一般有使用XML的,也有使用文本文件的,或者使用数据库的等.我们软件平台一些参数是使用XML文件存储,在读取方面的速度还可以,但在写回文件速度一般.也 ...

  9. Memento 模式

    Memento 模式的关键就是要在不破坏封装行的前提下,捕获并保存一个类的内部状态,这样就可以利用该保存的状态实施恢复操作. /////////Originator.h//////////////// ...

  10. 读书笔记之 - javascript 设计模式 - 接口、封装和链式调用

    javascript 采用设计模式主要有下面的三方面原因: 可维护性:设计模式有助于降低模块之间的耦合程度.这使代码进行重构和换用不同的模块变得容易,也使程序员在大型项目中合作变得容易. 沟通:设计模 ...