利用隐藏复选框与:checked伪类控制菜单展开，通过label触发状态切换；2. 使用~选择器关联复选框与菜单内容，结合max-height和transition实现平滑动画；3. 设置overflow:hidden确保内容裁剪，调整max-height值适配菜单高度，完成轻量无JS的折叠菜单。
要实现一个通过CSS制作的折叠菜单效果，关键在于利用CSS的:checked伪类结合隐藏的复选框（checkbox）来控制菜单的展开与收起。这种方法无需JavaScript，适合简单的交互需求。
1. 使用复选框控制展开状态
通过一个隐藏的复选框来作为“开关”，点击标签（label）时触发复选框的选中状态，再用CSS根据该状态控制菜单内容的显示或隐藏。
HTML结构示例：
2. 核心CSS样式设置
使用:checked选择器配合~兄弟选择符来控制后续元素的显示。
AI Humanize
使用AI改写工具，生成不可被AI检测的文本内容
154 查看详情 
立即学习“前端免费学习笔记（深入）”；
.menu-checkbox {
display: none;
}
.menu-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.menu-checkbox:checked ~ .menu-content {
max-height: 200px; / 根据实际内容调整 /
}
.menu-label {
cursor: pointer;
padding: 10px;
background: #007bff;
color: white;
display: block;
}
3. 添加动画与视觉优化
使用max-height而非display是为了实现平滑过渡动画。因为display无法添加过渡效果。
设置overflow: hidden确保内容被裁剪调整max-height值需足够容纳所有菜单项可加入opacity或transform增强动效
基本上就这些。这种方式轻量、兼容性好，适合移动端或简单项目中的折叠菜单需求。关键是理解利用隐藏输入框和CSS选择器模拟交互行为的思路。不复杂但容易忽略细节。
以上就是如何通过css制作折叠菜单效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1053986.html
微信扫一扫 
支付宝扫一扫 
