Grade无级菜单

2024-06-19 10:17:51首发，1个月前更新

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

前言

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

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

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

简单使用

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

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

输出
HTML

无级菜单
试一试

<div class="_a-cc">
    <span class="_grade"><i rep="host">无级菜单</i>
        <ul class="_grade-wrap _reset">
            <li>
                <div rep="head"><a href="###" rep="label">用户管理</a></div>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">信息管理</a><i rep="arrow"></i></div>
                <ul>
                    <li>
                        <div rep="head"><a href="###" rep="label">体育新闻</a></div>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">时政新闻</a><i rep="arrow"></i></div>
                        <ul>
                            <li>
                                <div rep="head"><a href="###" rep="label">增加</a></div>
                            </li>
                            <li>
                                <div rep="head"><a href="###" rep="label">删除</a></div>
                            </li>
                            <li>
                                <div rep="head"><a href="###" rep="label">修改</a></div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">娱乐新闻</a></div>
                    </li>
                </ul>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">体育新闻</a></div>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">权限配置</a></div>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">参数配置</a></div>
            </li>
        </ul>
    </span>
</div>

状态

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

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

输出
HTML

无级菜单
试一试

<div class="_a-cc">
    <span class="_grade"><i rep="host">无级菜单</i>
        <ul class="_grade-wrap _reset">
            <li>
                <div rep="head" disabled=""><a href="###" rep="label">用户管理</a></div>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">信息管理</a><i rep="arrow"></i></div>
                <ul>
                    <li>
                        <div rep="head"><a href="###" rep="label">体育新闻</a></div>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">时政新闻</a><i rep="arrow"></i></div>
                        <ul>
                            <li>
                                <div rep="head"><a href="###" rep="label">增加</a></div>
                            </li>
                            <li>
                                <div rep="head"><a href="###" rep="label">删除</a></div>
                            </li>
                            <li>
                                <div rep="head"><a href="###" rep="label">修改</a></div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">娱乐新闻</a></div>
                    </li>
                </ul>
            </li>
            <li>
                <div rep="head" selected=""><a href="###" rep="label">体育新闻</a></div>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">权限配置</a></div>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">参数配置</a></div>
            </li>
        </ul>
    </span>
</div>

宿主使用指示

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

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

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

输出
HTML

使用指示箭头

用户管理

信息管理

体育新闻

权限配置

参数配置
使用指示灯

用户管理

信息管理

体育新闻

权限配置

参数配置
试一试

<div class="_a-c">
    <div class="_row">
        <div class="_flex">
            <span class="_grade"><span rep="host"><i rep="label">使用指示箭头</i><i rep="arrow"></i></span>
                <ul class="_grade-wrap _reset">
                    <li>
                        <div rep="head"><a href="###" rep="label">用户管理</a></div>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">信息管理</a></div>
                    </li>
                    <li>
                        <div rep="head" selected=""><a href="###" rep="label">体育新闻</a></div>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">权限配置</a></div>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">参数配置</a></div>
                    </li>
                </ul>
            </span>
        </div>
        <div class="_flex">
            <span class="_grade"><span rep="host" selected=""><i rep="label">使用指示灯</i></span>
                <ul class="_grade-wrap _reset">
                    <li>
                        <div rep="head"><a href="###" rep="label">用户管理</a></div>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">信息管理</a></div>
                    </li>
                    <li>
                        <div rep="head" selected=""><a href="###" rep="label">体育新闻</a></div>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">权限配置</a></div>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">参数配置</a></div>
                    </li>
                </ul>
            </span>
        </div>
    </div>
</div>

使用icon指示图标

rep=icon表示字体图标。

输出
HTML

无级菜单
试一试

<div class="_a-cc">
    <span class="_grade"><i rep="host">无级菜单</i>
        <ul class="_grade-wrap _reset">
            <li>
                <div rep="head"><i class="_icon-people" rep="icon"></i><a href="###" rep="label">用户管理</a></div>
            </li>
            <li>
                <div rep="head"><i class="_icon-clock" rep="icon"></i><a href="###" rep="label">信息管理</a></div>
            </li>
            <li>
                <div rep="head" selected=""><i class="_icon-check-o-gap" rep="icon"></i><a href="###" rep="label">体育新闻</a></div>
            </li>
            <li>
                <div rep="head"><i class="_icon-global" rep="icon"></i><a href="###" rep="label">权限配置</a></div>
            </li>
            <li>
                <div rep="head"><i class="_icon-options" rep="icon"></i><a href="###" rep="label">参数配置</a></div>
            </li>
        </ul>
    </span>
</div>

使用指示图片

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

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

输出
HTML

无级菜单
试一试

<div class="_a-cc">
    <span class="_grade"><i rep="host">无级菜单</i>
        <ul class="_grade-wrap _reset">
            <li>
                <div rep="head"><img src="https://unpkg.com/@codady/resource/image/avatar03.jpg" rep="disk"><a href="###" rep="label">用户管理</a></div>
            </li>
            <li>
                <div rep="head"><img src="https://unpkg.com/@codady/resource/image/avatar04.jpg" rep="disk"><a href="###" rep="label">信息管理</a></div>
            </li>
            <li>
                <div rep="head" selected=""><img src="https://unpkg.com/@codady/resource/image/avatar05.jpg" rep="disk"><a href="###" rep="label">体育新闻</a></div>
            </li>
            <li>
                <div rep="head"><img src="https://unpkg.com/@codady/resource/image/avatar06.jpg" rep="cube"><a href="###" rep="label">权限配置</a></div>
            </li>
            <li>
                <div rep="head"><img src="https://unpkg.com/@codady/resource/image/earth02_sm.jpg" rep="image"><a href="###" rep="label">参数配置</a></div>
            </li>
        </ul>
    </span>
</div>

多行内容

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

输出
HTML

无级菜单
试一试

<div class="_a-cc">
    <span class="_grade"><i rep="host">无级菜单</i>
        <ul class="_grade-wrap _reset">
            <li>
                <div rep="head"><a href="###" rep="label">雅万高铁沿线车站设计突出印尼元素</a></div>
            </li>
            <li>
                <div rep="head"><i class="_icon-clock" rep="icon"></i><a href="###" rep="label" class="_ell-2">暑期全国演出超11万场 票房收入破百亿</a><i rep="arrow"></i></div>
                <ul>
                    <li>
                        <div rep="head"><a href="###" rep="label">28岁退役军人和好友救出车祸被困3人</a></div>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">破案了，原来瑞幸和茅台的中间商是“塞尚”</a></div>
                    </li>
                </ul>
            </li>
            <li>
                <div rep="head" selected=""><i class="_icon-check-o" rep="icon"></i><a href="###" rep="label" class="_ell-2">中国互联网联合辟谣平台2023年8月辟谣榜</a></div>
            </li>
        </ul>
    </span>
</div>

居中排列

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

输出
HTML

无级菜单
试一试

<div class="_a-cc">
    <span class="_grade"><i rep="host">无级菜单</i>
        <ul class="_grade-wrap _reset _a-c">
            <li>
                <div rep="head"><a href="###" rep="label">用户管理</a></div>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">信息管理</a><i rep="arrow"></i></div>
                <ul>
                    <li>
                        <div rep="head"><a href="###" rep="label">体育新闻</a></div>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">时政新闻</a><i rep="arrow"></i></div>
                        <ul>
                            <li>
                                <div rep="head"><a href="###" rep="label">增加</a></div>
                            </li>
                            <li>
                                <div rep="head"><a href="###" rep="label">删除</a></div>
                            </li>
                            <li>
                                <div rep="head"><a href="###" rep="label">修改</a></div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div rep="head"><a href="###" rep="label">娱乐新闻</a></div>
                    </li>
                </ul>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">体育新闻</a></div>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">权限配置</a></div>
            </li>
            <li>
                <div rep="head"><a href="###" rep="label">参数配置</a></div>
            </li>
        </ul>
    </span>
</div>

相对位置

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

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

输出
HTML

bottom-start

用户管理

信息管理

体育新闻

权限配置

参数配置
bottom

用户管理

信息管理

体育新闻

权限配置

参数配置
bottom-end

用户管理

信息管理

体育新闻

权限配置

参数配置
right

用户管理

信息管理

体育新闻

权限配置

参数配置
试一试

<div class="_row _a-c">
    <div class="_flex">
        <span class="_grade" placement="bottom-start"><i rep="host">bottom-start</i>
            <ul class="_grade-wrap _reset">
                <li>
                    <div rep="head"><a href="###" rep="label">用户管理</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">信息管理</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">体育新闻</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">权限配置</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">参数配置</a></div>
                </li>
            </ul>
        </span>
    </div>
    <div class="_flex">
        <span class="_grade"><i rep="host">bottom</i>
            <ul class="_grade-wrap _reset">
                <li>
                    <div rep="head"><a href="###" rep="label">用户管理</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">信息管理</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">体育新闻</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">权限配置</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">参数配置</a></div>
                </li>
            </ul>
        </span>
    </div>
    <div class="_flex">
        <span class="_grade" placement="bottom-end"><i rep="host">bottom-end</i>
            <ul class="_grade-wrap _reset">
                <li>
                    <div rep="head"><a href="###" rep="label">用户管理</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">信息管理</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">体育新闻</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">权限配置</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">参数配置</a></div>
                </li>
            </ul>
        </span>
    </div>
    <div class="_flex">
        <span class="_grade" placement="right"><i rep="host">right</i>
            <ul class="_grade-wrap _reset">
                <li>
                    <div rep="head"><a href="###" rep="label">用户管理</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">信息管理</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">体育新闻</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">权限配置</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">参数配置</a></div>
                </li>
            </ul>
        </span>
    </div>
</div>

下拉小窗

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

小窗支持placement属性。

输出
HTML

bottom-start

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。

bottom

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。

bottom-end

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。

right

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。

试一试

<div class="_row _a-c">
    <div class="_flex">
        <span class="_grade" placement="bottom-start"><i rep="host">bottom-start</i>
        <div class="_grade-wrap">
        <div class="_p">
        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
        </div>
        </div>
    </span>
    </div>
    <div class="_flex">
        <span class="_grade">bottom
        <div class="_grade-wrap">
        <div class="_p">
        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
        </div>
        </div>
    </span>
    </div>
    <div class="_flex">
        <span class="_grade" placement="bottom-end"><i rep="host">bottom-end</i>
        <div class="_grade-wrap">
        <div class="_p">
        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
        </div>
        </div>
    </span>
    </div>
    <div class="_flex">
        <span class="_grade" placement="right"><i rep="host">right</i>
        <div class="_grade-wrap">
        <div class="_p">
        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
        </div>
        </div>
    </span>
    </div>
</div>

无级菜单组

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

输出
HTML

关于

企业文化

工厂掠影

团建互助
产品

手机支架

充电宝

数据线
技术

问题反馈

驱动下载

文档下载
联系

地址电话

全球营销

公关处理
试一试

<div class="_a-cc">
    <div class="_group-grade _a-c">
                    <span class="_grade"><span rep="host">关于<i rep="arrow"></i></span>
                                <ul class="_grade-wrap _reset">
                                    <li>
                                        <div rep="head"><a href="###" rep="label">企业文化</a></div>
                                    </li>
                                    <li>
                                        <div rep="head"><a href="###" rep="label">工厂掠影</a></div>
                                    </li>
                                    <li>
                                        <div rep="head" selected=""><a href="###" rep="label">团建互助</a></div>
                                    </li>
                                </ul>
                            </span>
                            <span class="_grade"><span rep="host">产品<i rep="arrow"></i></span>
                                <ul class="_grade-wrap _reset">
                                    <li>
                                        <div rep="head"><a href="###" rep="label">手机支架</a></div>
                                    </li>
                                    <li>
                                        <div rep="head"><a href="###" rep="label">充电宝</a></div>
                                    </li>
                                    <li>
                                        <div rep="head"><a href="###" rep="label">数据线</a></div>
                                    </li>
                                </ul>
                            </span>
                            <span class="_grade"><span rep="host">技术<i rep="arrow"></i></span>
                                <ul class="_grade-wrap _reset">
                                    <li>
                                        <div rep="head"><a href="###" rep="label">问题反馈</a></div>
                                    </li>
                                    <li>
                                        <div rep="head"><a href="###" rep="label">驱动下载</a></div>
                                    </li>
                                    <li>
                                        <div rep="head"><a href="###" rep="label">文档下载</a></div>
                                    </li>
                                </ul>
                            </span>
                            <span class="_grade"><span rep="host">联系<i rep="arrow"></i></span>
                                <ul class="_grade-wrap _reset">
                                    <li>
                                        <div rep="head"><a href="###" rep="label">地址电话</a></div>
                                    </li>
                                    <li>
                                        <div rep="head"><a href="###" rep="label">全球营销</a></div>
                                    </li>
                                    <li>
                                        <div rep="head"><a href="###" rep="label">公关处理</a></div>
                                    </li>
                                </ul>
                            </span>
                </div>
</div>

不折叠

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

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

输出
HTML

无级菜单
关于中国

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
试一试

<span class="_grade" expanded=""><i rep="host">无级菜单<i rep="arrow"></i></i>
    <ul class="_grade-wrap _reset">
        <li>
            <div rep="head"><a href="###" rep="label">用户管理</a></div>
        </li>
        <li>
            <div rep="head"><a href="###" rep="label">信息管理</a><i rep="arrow"></i></div>
            <ul>
                <li>
                    <div rep="head"><a href="###" rep="label">体育新闻</a></div>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">时政新闻</a><i rep="arrow"></i></div>
                    <ul>
                        <li>
                            <div rep="head"><a href="###" rep="label">增加</a></div>
                        </li>
                        <li>
                            <div rep="head"><a href="###" rep="label">删除</a></div>
                        </li>
                        <li>
                            <div rep="head"><a href="###" rep="label">修改</a></div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div rep="head"><a href="###" rep="label">娱乐新闻</a></div>
                </li>
            </ul>
        </li>
        <li>
            <div rep="head"><a href="###" rep="label">体育新闻</a></div>
        </li>
        <li>
            <div rep="head"><a href="###" rep="label">权限配置</a></div>
        </li>
        <li>
            <div rep="head"><a href="###" rep="label">参数配置</a></div>
        </li>
    </ul>
</span>
<hr>
<span class="_grade" expanded=""><i rep="host">关于中国</i>
    <div class="_grade-wrap">
    <div class="_p">
    中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
    </div>
    </div>
</span>