ZUI 3菜单
菜单用于展示一个操作列表，也可以用于构建更复杂的组件，例如右键菜单、下拉菜单等。如果需要通过 JS 动态创建菜单，可以使用菜单生成器
使用方法
使用类 .menu 和 .menu-item 按照如下结构来构建一个静态菜单：
标题
使用类 .menu-heading 来创建一个标题：
分割线
使用类 .divider 来添加一个分割线：
包含图标
可以在菜单项内添加图标，但如果是部分菜单项拥有图标，可以通过为 .menu 添加工具类 .has-icons 来让图标以及文本进行对齐：
禁用的菜单项
为 .menu-item 添加工具类 .disabled 来将菜单项禁用：
标记激活项
为 .menu-item 内的 <a> 元素添加工具类 .active 来将菜单项标记为激活状态：
标记选中项
为 .menu-item 内的 <a> 元素添加工具类 .active 来将菜单项标记为选中项状态：
尾部图标
直接将图标 .icon 元素添加到菜单项 .menu-item 内尾部，图标将自动靠右侧对齐：
自定义菜单项
在 .menu 内可以放置其他内容来自定义菜单项：
CSS 类
头像提供了如下 CSS 类：
| 类 | 类型 | 作用 |
|---|---|---|
menu | 实体类 | 元素作为菜单 |
menu-item | 实体类 | 元素作为菜单项 |
menu-heading | 实体类 | 元素作为菜单标题 |
divider | 实体类 | 元素作为分割线 |
has-icons | 工具类 | 与 menu 一起使用，标记菜单内包含图标 |
active | 工具类 | 标记菜单项为激活状态 |
selected | 工具类 | 标记菜单项为选中状态 |
disabled | 工具类 | 标记菜单项为禁用状态 |
CSS 变量
头像提供了如下 CSS 变量，可进行全局修改：
| CSS 变量名 | 作用 | 默认值 |
|---|---|---|
--menu-radius | 菜单圆角 | var(--radius) |
--menu-bg | 菜单背景颜色 | var(--color-canvas) |
--menu-border | 菜单边框 | 1px solid var(--color-border) |
--menu-shadow | 菜单阴影 | var(--shadow-lg) |
--menu-hover-bg | 菜单项鼠标悬停背景色 | var(--color-primary-500) |
--menu-hover-color | 菜单项鼠标悬停文字颜色 | var(--color-canvas) |
--menu-active-bg | 菜单项激活状态背景色 | var(--color-primary-50) |
--menu-active-color | 菜单项激活状态文字颜色 | var(--color-primary-500) |
--menu-icon-opacity | 菜单项图标透明度 | .5 |
--menu-heading-color | 菜单标题文字颜色 | var(--color-gray-500) |