纯CSS打造可折叠树状菜单

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打造可折叠树状菜单相关推荐

纯css打造菜单响应,纯 CSS 打造标准的导航菜单－1
本连载分三节讲述如何利用 CSS 打造一个符合标准.兼容各浏览器(IE6 除外.IE7 可以)的导航菜单. 菜单内容全部使用 ul,利用 CSS 将 ul 变成需要的样式,本节讲述最简单的:如何把原本 ...
CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
java 树右键菜单_jQuery实现自定义右键菜单的树状菜单效果
本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单, ...
精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...
PHP+jquery 树状菜单
本项目开发过程中涉及树状菜单,于是做如下分享菜单实现不足之处请大牛指点并见谅(如图) 1:数据表涉及字段 `id` int(10) unsigned NOT NULL AUTO_INCREMENT ...
纯CSS打造的Family tree（族谱）
Family tree(族谱),也称家谱,用来记录家族世系繁衍辈份关系.本文结合实例,不借助任何js脚本,使用纯CSS打造一个漂亮的Family tree(族谱),也可以应用的企业组织架构图中. 查看 ...
html图片倒角,CSS实例：纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
html银白色,纯CSS打造银色MacBookAir（二）_html/css_WEB-ITnose
上一篇:<纯CSS打造银色MacBook Air(一)> 写在前面上一篇我们谈了<纯CSS打造银色MacBook Air(一)>,今天我们接着谈. First注:如果图片过大 ...
vue+element实现树状菜单并底层菜单横向排列
参考博文:https://blog.csdn.net/qq_33769914/article/details/81562278 效果如下: 首先用elemnetUI的树形控件,将获取到的数据进行基本展 ...

纯CSS打造可折叠树状菜单

纯CSS打造可折叠树状菜单相关推荐

最新文章

热门文章