介绍
这篇文章将为大家详细讲解有关纯css怎样实现多级折叠菜单折叠树效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
1,运用复选框的检查值来判断下级栏目是否展开,CSS3的选择器中提供了:检查这个伪类,这个伪类提供我们,当元素拥有检查这个值的时候就执行你的css。
当有子菜单时,菜单项右侧有向下的箭头,当收起菜单项时,箭头朝上。图片可以自己替换。
2,效果图
3代码片段
& lt; ol 类=皌ree"祝辞,, ,,,,,,& lt; li>,, ,,,,,,,,,,& lt; label 为=癴older1",类=癴olderOne"在泽元框架& lt;/label>, & lt; input 类型=癱heckbox", id=癴older1",/祝辞, ,,,,,,,,,,& lt; ol>,, ,,,,,,,,,,,,,,,& lt; li>,, ,,,,,,,,,,,,,,,,,,& lt; label 为=皊ubfolder1"类=癴olderTwo"在开发规范& lt;/label>, & lt; input 类型=癱heckbox", id=皊ubfolder1",,/在,,, ,,,,,,,,,,,,,,,,,,& lt; ol>,, ,,,,,,,,,,,,,,,,,,,,,,& lt; li 类=癴ile folderThree"祝辞& lt; https://www.yisu.com/zixun/a href=" # ">常见界面错误举例> 李> <李class="文件folderThree "> 关于发行报告对缺陷管理提出…> 李> <李class="文件folderThree "> 插件内部JAVA包命名规范> 李> 李> <李class="文件folderTwo "> 概述> 李> <李class="文件folderTwo "> 服务器集群> 李> <李class="文件folderTwo "> 模板> 李> <李class="文件folderTwo "> 安全机制> 李> 李> <李> <标签=" folder2”class=" folderOne "> ZCMS 标签><李class="文件folderTwo "> 实时数据> 李> <李> <标签=" subfolder2”class=" folderTwo ">实时数据标签>
李> <李> <标签=" folder3”class=" folderOne ">咱标签><李class="文件folderThree "> 实时数据> 李> <李class="文件folderThree "> 实时数据> 李> <李class="文件folderThree "> 实时数据> 李>
李><李class="文件folderTwo "> 实时数据> 李> <李class="文件folderTwo "> 实时数据> 李>
李> <李> <标签=" folder4”class=" folderOne "> ZHTML标签标签><李class="文件folderTwo "> 实时数据> 李> <李class="文件folderTwo "> 实时数据> 李>
李> <李> <标签=" folder5”class=" folderOne "> UI框架API手册标签><李class="文件folderTwo "> 实时数据> 李> <李class="文件folderTwo "> 实时数据> 李>
李> <风格type=" text/css "> .tree{保证金:0;填充:0;background - color: # f2f2f2;溢出:隐藏;} 输入*//*隐藏 李.tree输入{:绝对;左:0;不透明度:0;z - index: 2;游标:指针;高度:1 em;宽度:1 em;: 0;}/*所有菜单项设置统一样式*/李.tree{位置:相对;list-style:没有;}/*一级菜单加下边线*/李.tree>{边界底部:1 px固体# d9d9d9;}/*给有子菜单的菜单项添加背景图标*/图片/cp-detail-arrow-b.png)没有重演对中心;背景位置:95% - 50%;空白:nowrap;}溢出:隐藏;文本溢出:省略;} .tree李标签:悬停,李标签:专注{background - color: # a7a7a7;颜色:# fff;}/*清除所有展开的子菜单的显示*/李.tree输入+ ol{显示:没有;}/*当输入被选中时,给所有展开的子菜单设置样式*/.tree输入:检查+ ol {padding-left: 14 px;高度:汽车;显示:块;} 李.tree输入:检查+ ol>{高度:汽车;}/*末层菜单为一个标签,设置样式*/.tree李。文件{优势:0 -10 px 0 -50 px;填充:15 px 20 px 15 px 70 px;文字修饰:没有,显示:块;颜色:# 333333;空白:nowrap;}溢出:隐藏;文本溢出:省略号;} .tree李。文件:悬停,李。文件:专注{background - color: # a7a7a7;颜色:# fff;}/*不同层级的菜单字体大小不同*/.tree .folderOne{字体大小:18 px;} .tree .folderTwo{字体大小:16 px;} .tree .folderThree{字体大小:14 px;}>纯css怎样实现多级折叠菜单折叠树效果