纯css打造可折叠树状菜单 -尊龙游戏旗舰厅官网
1：html代码
实现的思路是运用checkbox的checked值来判断下级栏目是否展开，css3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的css。（很强大是吧。有了css3我们会少写很多js哦！）
当checkbox的拥有checked值的时候就就让ol现实出来，达到我们想要的功能。
接下来看看css代码吧：
这段代码是树状菜单的中心：
input:checked ol {
background: 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：实例源代码
3：效果图
总结
以上是尊龙游戏旗舰厅官网为你收集整理的纯css打造可折叠树状菜单的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： start – modern minim
- 下一篇： nginx conf header se