Grade简约无限层级菜单
grade菜单是Menu模块的简化版,grade不是组件或模块,是原生css+html打造,用户在保留grade基本结构前提下可自行插入任意内容,也可以组合到自定义的模块或组件。
前言
如果需要实现一个不限层级的菜单,不需要特别浮夸的特效,纯css便可完成,本框架grade
无级菜单便是如此,他主要依赖以下几点:
- 借助
ul+li
构建层级关系 - 借助
hover
伪类实现鼠标交互显示和隐藏
用户可以自行封装无级菜单成其他模块或插件。另外,本框架已有功能强大的菜单模块,包括Menu
、Nav
和Tooltips
。
简单使用
由于无级菜单有纯css
打造,所以对格式有些特定要求,构建步骤如下:
- 将根菜单名置于
_grade
中 - 使用
role=host
构建宿主节点,不过这不是必须的 - 通过构建
ul+li
创建节点层级 - ul根节点追加
_grade-wrap
样式类,并在子菜单中至少使用role=head
和role=label
标签,其他role元素为可选 - 由于ul+li自带了样式,可使用
_reset
样式类清除
状态
子菜单有三种状态,normal
常规状态,selected
选中状态和disabled
禁用状态。
对role=head
节点追加selected
或disabled
属性即可。
宿主使用指示
如果使用role=host
标记了宿主节点,那么如果其内部有role=arrow
节点,在菜单展开或折叠的时候将会有指示动画。
给宿主节点追加selected
属性可显示指示灯效果;指示灯始终在宿主正下方最底部。
在selected状态下,如果需要使用宿主菜单的指示灯效果,需要使用role=label
标签。
使用icon指示图标
role=icon
表示字体图标。
使用指示图片
role=disk
表示圆形图片;role=cube
表示方形图片。
多行内容
子菜单内容不限于一行,也可现实两行或多行。如果希望多行省略,可使用_ell-*
样式类,*
可取值1~9
,_ell
表示单行省略。
- 输出
- HTML
居中排列
菜单内容默认居左排列,如果内容比较整齐,可以考虑居中排列,对根节点使用_a-c
样式类即可(a=align,c=center)。
相对位置
菜单默认居于根菜单名的正下方,即bottom,除此之外还有三个位置可选。
- placement=bottom:正下方(默认)
- placement=bottom-start:居右下
- placement=bottom-end:居左下
- placement=right:居右
- 输出
- HTML
下拉小窗
如果用户希望自定义菜单,那么可以不使用ul+li构建节点,改对_grade-wrap
使用div标签,将用户的自定义的内容置入_grade-wrap
。
小窗支持placement
属性。
- 输出
- HTML
-
bottom-start中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。bottom中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。bottom-end中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。right中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。
-
无级菜单组
使用_group-grade
容器包括若干_grade
节点形成一组无级菜单。
不折叠
由于移动端对hover
行为体验不好,可以考虑直接展开,根节点直接追加expanded
属性即可。
展开后的无级菜单将以头缩进的形式显示层级关系。