Grade无级菜单

2024-06-19 10:17:51首发，2周前更新

grade菜单是Menu模块的简化版，grade不是组件或模块，是原生css+html打造，用户在保留grade基本结构前提下可自行插入任意内容，也可以组合到自定义的模块或组件。

前言

如果需要实现一个不限层级的菜单，不需要特别浮夸的特效，纯css便可完成，本框架grade无级菜单便是如此，他主要依赖以下几点：

1. 借助ul+li构建层级关系
2. 借助hover伪类实现鼠标交互显示和隐藏

用户可以自行封装无级菜单成其他模块或插件。另外，本框架已有功能强大的菜单模块，包括Menu、Navigation和Dropdown。

简单使用

由于无级菜单有纯css打造，所以对格式有些特定要求，构建步骤如下：

1. 将根菜单名置于_grade节点中
2. 使用rep=host节点构建宿主节点，不过这不是必须的
3. 通过构建ul+li创建节点层级
4. ul根节点追加_grade-wrap样式类，并在子菜单中至少使用rep=head和rep=label标签，其他rep元素为可选
5. 由于ul+li自带了样式，可使用_reset样式类清除

状态

子菜单有三种状态，normal常规状态，selected选中状态和disabled禁用状态。

对rep=head节点追加selected或disabled属性即可。

宿主使用指示

如果使用rep=host标记了宿主节点，那么如果其内部有rep=arrow节点，在菜单展开或折叠的时候将会有指示动画。

给宿主节点追加selected属性可显示指示灯效果；指示灯始终在宿主正下方最底部。

在selected状态下，如果需要使用宿主菜单的指示灯效果，需要使用rep=label标签。

使用icon指示图标

rep=icon表示字体图标。

使用指示图片

支持使用3种指示图片，分别是disk、cube和image

rep=disk表示圆形图片；rep=cube表示方形图片；rep=image表示一般图片。

多行内容

子菜单内容不限于一行，也可现实两行或多行。如果希望多行省略，可使用_ell-*样式类，*可取值1~9，_ell表示单行省略。

居中排列

菜单内容默认居左排列，如果内容比较整齐，可以考虑居中排列，对根节点使用_a-c样式类即可（a=align，c=center）。

相对位置

菜单默认居于根菜单名的正下方，即bottom，除此之外还有三个位置可选。

• placement=bottom：正下方（默认）
• placement=bottom-start：居右下
• placement=bottom-end：居左下
• placement=right：居右

下拉小窗

如果用户希望自定义菜单，那么可以不使用ul+li构建节点，改对_grade-wrap使用div标签，将用户的自定义的内容置入_grade-wrap。

小窗支持placement属性。

无级菜单组

使用_group-grade容器包括若干_grade节点形成一组无级菜单。

不折叠

由于移动端对hover行为体验不好，可以考虑直接展开，根节点直接追加expanded属性即可。

展开后的无级菜单将以头缩进的形式显示层级关系。

深色背景

如果嵌套在深色背景的容器中，那么可能需要通过CSS变量修改顶层菜单的颜色。可使用的变量如下：

• --_grade-c-1st：顶层菜单的文本色
• --_grade-c-hov-1st：顶层菜单的悬停文本色
• --_grade-c-sel-1st：顶层菜单的expanded/selected状态文本色，默认与--_grade-c-hov-1st相同