随着css3的发布，国外研究正如火如荼，但在国内还有很多人抱着ie不支持css3的想法，始终无动于衷不肯去学习。但是历史告诉我们，好的东西必将盛行，css3也终将也会替代css2，下面就和大家分享一个用css3打造的可折叠树状菜单。
树状菜单相信大家都不会陌生，我们一般用css+js 的方式来实现。而css3的到来，让我们摆脱js的束缚，直接运用css3的“选择器“就能实现可折叠树状菜单。
整体的代码很多，就不逐句逐句讲了，只把我觉得重要的地方提出来说说吧。
html代码：
下级
无限级
无限级
无限级
无限级
无限级
无限级
实现的思路是运用checkbox的checked值来判断下级栏目是否展开，css3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的css。(很强大是吧。有了css3我们会少写很多js哦!)
当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拥有的样式。
使用ie9以下浏览就不用看了，请使用非ie浏览器。
(想让ie6+浏览器支持也是可以，但是需要加js来模拟css3属性。国外有很多牛人都写了让ie6+浏览器支持部分css3的js，例如pie。)
总结：
总体来说，实现思路很简单，主要是利用css3的 checked 伪类来实现ol的隐藏显示。不过遗憾的是ie游览器不支持css3，但我们不能因为ie的不支持而放弃对css3的研究。在国外css3和html5都是前端很热门的话题，他们研究的东西远远超过我们，但国内真正去尝试的还是不多，对于一个前端开发人员来说是一件很可悲的事。我认为css3应该引起我们的重视，不能让我们输在起跑线。让我们大家一起来推动css3的发展吧。
以上就是使用纯CSS打造可折叠树状菜单方法介绍的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608110.html
微信扫一扫 
支付宝扫一扫 
