HTML列表标签怎么制作侧边栏折叠树形菜单-H5教程-PHP中文网

侧边栏折叠树形菜单用嵌套实现层级结构，css控制显隐（推荐max-height过渡），js切换expanded类，配合伪元素箭头、缩进和响应式适配。

html列表标签怎么制作侧边栏折叠树形菜单

用 HTML 列表标签（<ul></ul>、<li>）制作侧边栏折叠树形菜单，核心是利用嵌套结构 + CSS 控制显隐 + 少量 JS 实现交互。它不依赖框架，轻量、可控，适合静态或简单动态场景。

基础 HTML 结构：用嵌套列表表达层级

树形菜单的本质是父子关系，<ul></ul> 和 <li> 天然支持这种嵌套。一级菜单项是顶层 <li>，子菜单放在对应 <li> 内部的 <ul></ul> 中：

首页
用户管理
- 用户列表
- 角色权限
- 部门设置
系统设置
- 参数配置
- 日志审计
  - 操作日志
  - 登录日志

注意：无需额外 class 或 ID 即可表达三级结构；但为便于控制，建议给最外层 <ul></ul> 加一个明确的 class，如 class="sidebar-menu"。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

CSS 控制折叠与展开状态

默认隐藏所有子级 <ul></ul>，鼠标悬停或点击时才显示。关键靠 :hover 或配合 checkbox hack / JS 切换 class：

用 :hover 实现纯 CSS 悬停展开（适合桌面端）：
.sidebar-menu ul { display: none; }
.sidebar-menu li:hover > ul { display: block; }
用 checkbox + label 实现点击切换（无 JS，兼容性好）：
在每个可折叠项前加隐藏 checkbox，用 label 触发，通过 :checked ~ ul 控制显示
更推荐：添加 class="collapsed" 控制，默认隐藏，JS 点击时切换该 class，CSS 定义：
.sidebar-menu ul { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
.sidebar-menu ul.expanded { max-height: 500px; }
（用 max-height 替代 display 可实现平滑过渡）

添加图标和视觉反馈

提升可用性需明确标识“可折叠”：

在有子菜单的 <li> 后插入小箭头（如 ▶ / ▼），可用 CSS 伪元素生成：
.sidebar-menu li > ul { position: relative; }
.sidebar-menu li:has(> ul)::after { content: "▶"; font-size: 12px; margin-left: 8px; }
.sidebar-menu li > ul.expanded + .arrow::after { content: "▼"; }
选中态高亮：给当前激活菜单项加背景色或边框，例如通过 URL 匹配或 JS 设置 class="active"
缩进与间距：用 padding-left 区分层级，每级增加 20px 左右，让结构一目了然