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. C#面向对象（二）

    一:抽象方法 1. 在面向对象编程语言中抽象方法指一些只有方法声明,而没有具体方法体的方法.抽象方法一般存在于抽象类或接口中. 在一些父类中,某些行为不是非常明确,因此无法用代码来具体实现,但是类还必 ...

  2. 【原创教程】虎咽CSS

      上节课我们讲了HTML基础,回顾的事我不干了,因为你可以回头看很多遍,这节课我们来学习下CSS这门艺术的基础知识,一直以来我们都是CSS,CSS那么CSS到底是什么呢,惯例,我又来一层一层把CSS ...

  3. [DEncrypt] RSACryption--RSA加密/解密字符串 （转载）

    点击下载 RSACryption.zip 这个类是关于加密,解密的操作,文件的一些高级操作1.RSACryption RSA 的密钥产生2.RSACryption RSA的加密函数3.RSACrypt ...

  4. ubuntu下配置java环境变量

    1.官网下载linux对应的jdk安装包tar.gz 2.filezilla上传tar.gz到对应ubuntu目录test下(见上一篇) 3.解压:tar -zcvf XXX.tar.gz 4.修改解 ...

  5. .NET下的加密解密大全（2）：对称加密

    本博文列出了.NET下常用的对称加密算法,并将它们制作成小DEMO,希望能对大家有所帮助. 公共代码[csharp]static byte[] CreateKey(int num) {     byt ...

  6. 还原data block dumps实际值

    前天看了一个案例因为丢了表上的数据,从索引block中找回了值 转储了oracle block的值,如何得到它真正表中的值,也算 是dump(val,16)的逆运算 sys@ORCL>conn ...

  7. 6 关于 Oracle NULL栏位和PL./SQL执行实验

    今日有针对NULL值有了相关实验. 对NULL 值插入的讨论. 1, PL/SQL 中可以执行插入''或者NULL 的操作, 前提是栏位允许为空. 2, 可以对NULL进行一系列数据库运算. 如:   ...

  8. Lost connection to MySQL server at ‘reading initial communication packet', system error: 0 mysql远程连接问题

    在用Navicat for MySQL远程连接mysql的时候,出现了 Lost connection to MySQL server at ‘reading initial communicatio ...

  9. [Introduction to programming in Java 笔记] 1.3.7 Converting to binary 十进制到二进制的转换

    public class Binary { public static void main(String[] args) { // Print binary representation of N. ...

  10. linux服务端的网络编程

    常见的Linux服务端的开发模型有多进程.多线程和IO复用,即select.poll和epoll三种方式,其中现在广泛使用的IO模型主要epoll,关于该模型的性能相较于select和poll要好不少 ...