Grade 无限等级菜单
基本用法
使用ul+li构建菜单树结构，借助css中的hover伪类实现简单无限等级菜单。默认是下拉菜单。
基本结构是ax-grade + ax-grade-wrapper + label + arrow。
<div style="padding:36px;text-align: center">
<span class="ax-grade">无限等级菜单
<ul class="ax-grade-wrapper">
<li>
<div><a href="###" label>用户管理</a></div>
</li>
<li>
<div><a href="###" label>信息管理</a><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><a href="###" label>体育新闻</a></div>
</li>
<li>
<div><a href="###" label>时政新闻</a><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><a href="###" label>增加</a></div>
</li>
<li>
<div><a href="###" label>删除</a></div>
</li>
<li>
<div><a href="###" label>修改</a></div>
</li>
</ul>
</li>
<li>
<div><a href="###" label>娱乐新闻</a></div>
</li>
</ul>
</li>
<li>
<div selected><a href="###" label>体育新闻</a></div>
</li>
<li>
<div><a href="###" label>权限配置</a></div>
</li>
<li>
<div><a href="###" label>参数配置</a></div>
</li>
</ul>
</span>
</div>
菜单位置
菜单一共支持四个位置，通过placement属性设置菜单位置，可使用的值有：right、bottom-start、bottom-end和bottom（默认）。
<div class="ax-row">
<div class="ax-col ax-col-6" style="padding:36px;text-align: center">
<span class="ax-grade" placement="bottom-start">bottom-start
<ul class="ax-grade-wrapper">
<li>
<div><a href="###" label>用户管理</a></div>
</li>
<li>
<div><a href="###" label>信息管理</a></div>
</li>
<li>
<div selected><a href="###" label>体育新闻</a></div>
</li>
<li>
<div><a href="###" label>权限配置</a></div>
</li>
<li>
<div><a href="###" label>参数配置</a></div>
</li>
</ul>
</span>
</div>
<div class="ax-col ax-col-6" style="padding:36px;text-align: center">
<span class="ax-grade">bottom
<ul class="ax-grade-wrapper">
<li>
<div><a href="###" label>用户管理</a></div>
</li>
<li>
<div><a href="###" label>信息管理</a></div>
</li>
<li>
<div selected><a href="###" label>体育新闻</a></div>
</li>
<li>
<div><a href="###" label>权限配置</a></div>
</li>
<li>
<div><a href="###" label>参数配置</a></div>
</li>
</ul>
</span>
</div>
<div class="ax-col ax-col-6" style="padding:36px;text-align: center">
<span class="ax-grade" placement="bottom-end">bottom-end
<ul class="ax-grade-wrapper">
<li>
<div><a href="###" label>用户管理</a></div>
</li>
<li>
<div><a href="###" label>信息管理</a></div>
</li>
<li>
<div selected><a href="###" label>体育新闻</a></div>
</li>
<li>
<div><a href="###" label>权限配置</a></div>
</li>
<li>
<div><a href="###" label>参数配置</a></div>
</li>
</ul>
</span>
</div>
<div class="ax-col ax-col-6" style="padding:36px;text-align: center">
<span class="ax-grade" placement="right">right
<ul class="ax-grade-wrapper">
<li>
<div><a href="###" label>用户管理</a></div>
</li>
<li>
<div><a href="###" label>信息管理</a></div>
</li>
<li>
<div selected><a href="###" label>体育新闻</a></div>
</li>
<li>
<div><a href="###" label>权限配置</a></div>
</li>
<li>
<div><a href="###" label>参数配置</a></div>
</li>
</ul>
</span>
</div>
</div>
使用图标
将普通图标标签写上legend属性插入label前方即可。
<div style="padding:36px;text-align: center">
<span class="ax-grade">无限等级菜单
<ul class="ax-grade-wrapper">
<li>
<div><i class="ax-iconfont ax-icon-people" legend></i><a href="###" label>用户管理</a></div>
</li>
<li>
<div><i class="ax-iconfont ax-icon-clock" legend></i><a href="###" label>信息管理</a></div>
</li>
<li>
<div selected><i class="ax-iconfont ax-icon-check-o-gap" legend></i><a href="###" label>体育新闻</a></div>
</li>
<li>
<div><i class="ax-iconfont ax-icon-global" legend></i><a href="###" label>权限配置</a></div>
</li>
<li>
<div><i class="ax-iconfont ax-icon-options" legend></i><a href="###" label>参数配置</a></div>
</li>
</ul>
</span>
</div>
多行文字
如果菜单名称比较长也没关系，ax-grade兼容多行文字显示。
<div style="padding:36px;text-align: center">
<span class="ax-grade">无限等级菜单
<ul class="ax-grade-wrapper">
<li>
<div><a href="###" label>雅万高铁沿线车站设计突出印尼元素</a></div>
</li>
<li>
<div><i class="ax-iconfont ax-icon-clock" legend></i><a href="###" label>暑期全国演出超11万场 票房收入破百亿</a><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><a href="###" label>28岁退役军人和好友救出车祸被困3人</a></div>
</li>
<li>
<div><a href="###" label>破案了，原来瑞幸和茅台的中间商是“塞尚”</a></div>
</li>
</ul>
</li>
<li>
<div selected><i class="ax-iconfont ax-icon-check-o-gap" legend></i><a href="###" label>中国互联网联合辟谣平台2023年8月辟谣榜</a></div>
</li>
</ul>
</span>
</div>
居中排列
菜单默认居左排列，如果用户需要居中排列可对ax-grade-wrapper节点追加ax-align-center属性。
<div style="padding:36px;text-align: center">
<span class="ax-grade">无限等级菜单
<ul class="ax-grade-wrapper ax-align-center">
<li>
<div><a href="###" label>用户管理</a></div>
</li>
<li>
<div><a href="###" label>信息管理</a><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><a href="###" label>体育新闻</a></div>
</li>
<li>
<div><a href="###" label>时政新闻</a><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><a href="###" label>增加</a></div>
</li>
<li>
<div><a href="###" label>删除</a></div>
</li>
<li>
<div><a href="###" label>修改</a></div>
</li>
</ul>
</li>
<li>
<div><a href="###" label>娱乐新闻</a></div>
</li>
</ul>
</li>
<li>
<div selected><a href="###" label>体育新闻</a></div>
</li>
<li>
<div><a href="###" label>权限配置</a></div>
</li>
<li>
<div><a href="###" label>参数配置</a></div>
</li>
</ul>
</span>
</div>
下拉小窗
如果不是ul+li结构的菜单，仅仅是下拉小窗，请用div代替ul，对div使用ax-grade-wrapper类，宽度通过style自定义，见效果演示。
无限等级菜单
默认居中小窗！
无限等级菜单
居左小窗！
无限等级菜单
居右小窗！
<div class="ax-row">
<div class="ax-col ax-col-8" style="padding:36px;text-align: center">
<span class="ax-grade">无限等级菜单
<div class="ax-grade-wrapper" style="width:300px;">
默认居中小窗！
</div>
</span>
</div>
<div class="ax-col ax-col-8" style="padding:36px;text-align: center">
<span class="ax-grade" placement="bottom-start">无限等级菜单
<div class="ax-grade-wrapper" style="width:300px;">
居左小窗！
</div>
</span>
</div>
<div class="ax-col ax-col-8" style="padding:36px;text-align: center">
<span class="ax-grade" placement="bottom-end">无限等级菜单
<div class="ax-grade-wrapper" style="width:300px;">
居右小窗！
</div>
</span>
</div>
</div>