您现在的位置是：网站首页> 编程资料编程资料

纯css实现多级折叠菜单折叠树效果CSS多级菜单的实现代码

2023-10-20 204人已围观

简介这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果，运用checkbox的checked值来判断下级栏目是否展开，通过css3选择器提供的checked伪类来实现此效果，感兴趣的朋友参考下吧

1、运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的CSS。

当有子菜单时，菜单项右侧有向下的箭头，当收起菜单项时，箭头朝上。图片可以自己替换。

2、效果图

3、代码片段

泽元框架开发规范常见界面错误举例
关于发行报告对BUG管理提出…
插件内部JAVA包命名规范
概述
服务器集群
模板
安全机制
ZCMS实时数据
实时数据实时数据
实时数据
实时数据
ZAS实时数据
实时数据
ZHTML标签实时数据
实时数据
UI框架API手册实时数据
实时数据

下面介绍下CSS 菜单折叠

先给大家展示效果图：

如上，假设一级菜单是 div，二级菜单是 ul。形如：

业务管理
 ... 汇总分析 ... >系统管理 ...

当菜单展开时，左边有一个蓝色的标记，右边是折叠标记。

左边蓝色标记自不用表，CSS 设置 border 即可，右边利用 CSS 也超方便。

 div span { float:right; padding-right:20px; } div span:after { content: "∨" } div.collapsed span:after { content: "∧" }

然后再说子菜单的折叠效果，有动画噢：

 div.collapsed + ul { height: 0px; transition: height 0.5s ease-out; } div ul { height: 80px; transition: height 0.5s ease-in; }

注意 ul 一定要有 height 的具体值，如果没有具体指明多少 px，则虽然能折叠，但是没有动画效果。

最后就是利用 jQuery 或 ezj 切换 className 了，当点击 div 的时候 toggleClass("collapsed")。

总结

以上所述是小编给大家介绍的纯css实现多级折叠菜单折叠树效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！