Grade 无限等级菜单
基本用法
使用ul+li构建菜单树结构,借助css中的hover
伪类实现简单无限等级菜单。默认是下拉菜单。
<span class="ax-grade">无限等级菜单 <ul class="ax-outer"> <li><a href="###">用户管理</a></li> <li><a href="###">信息管理</a><span class="ax-iconfont ax-icon-right"></span> <ul> <li><a href="###">体育新闻</a></li> <li><a href="###">时政新闻</a><span class="ax-iconfont ax-icon-right"></span> <ul> <li class="ax-selected"><a href="###">增加</a></li> <li><a href="###">删除</a></li> <li><a href="###">修改</a></li> </ul> </li> <li><a href="###">娱乐新闻</a></li> </ul> </li> <li class="ax-selected"><a href="###">历史记录</a></li> <li><a href="###">权限设置</a></li> <li><a href="###">参数配置</a></li> </ul> </span>
右侧弹出
对ax-grade追加ax-right
类可实现右侧弹出菜单。
<span class="ax-grade ax-right">无限等级菜单 <ul class="ax-outer"> <li><a href="###">用户管理</a></li> <li><a href="###">信息管理</a><span class="ax-iconfont ax-icon-right"></span> <ul> <li><a href="###">体育新闻</a></li> <li><a href="###">时政新闻</a><span class="ax-iconfont ax-icon-right"></span> <ul> <li class="ax-selected"><a href="###">增加</a></li> <li><a href="###">删除</a></li> <li><a href="###">修改</a></li> </ul> </li> <li><a href="###">娱乐新闻</a></li> </ul> </li> <li class="ax-selected"><a href="###">历史记录</a></li> <li><a href="###">权限设置</a></li> <li><a href="###">参数配置</a></li> </ul> </span>
使用图标
像普通插入iconfont
图标即可。
<span class="ax-grade">无限等级菜单 <ul class="ax-outer"> <li><a href="###"><i class="ax-iconfont ax-icon-people"></i>用户管理</a></li> <li><a href="###"><i class="ax-iconfont ax-icon-global"></i>信息管理</a><span class="ax-iconfont ax-icon-right"></span> <ul> <li><a href="###">体育新闻</a></li> <li><a href="###">时政新闻</a><span class="ax-iconfont ax-icon-right"></span> <ul> <li class="ax-selected"><a href="###">增加</a></li> <li><a href="###">删除</a></li> <li><a href="###">修改</a></li> </ul> </li> <li><a href="###">娱乐新闻</a></li> </ul> </li> <li class="ax-selected"><a href="###"><i class="ax-iconfont ax-icon-clock"></i>历史记录</a></li> <li><a href="###"><i class="ax-iconfont ax-icon-check-o-gap"></i>权限设置</a></li> <li><a href="###"><i class="ax-iconfont ax-icon-options"></i>参数配置</a></li> </ul> </span>
下拉小窗
如果不是ul+li结构的菜单,仅仅是下拉小窗,请用div代替ul,对div使用ax-outer
类,宽度和位置通过style自定义,见效果演示。
无限等级菜单
默认居中小窗!
无限等级菜单
居左小窗!
无限等级菜单
居右小窗!
<span class="ax-grade">无限等级菜单 <ul class="ax-outer"> <li><a href="###"><i class="ax-iconfont ax-icon-people"></i>用户管理</a></li> <li><a href="###"><i class="ax-iconfont ax-icon-global"></i>信息管理</a><span class="ax-iconfont ax-icon-right"></span> <ul> <li><a href="###">体育新闻</a></li> <li><a href="###">时政新闻</a><span class="ax-iconfont ax-icon-right"></span> <ul> <li class="ax-selected"><a href="###">增加</a></li> <li><a href="###">删除</a></li> <li><a href="###">修改</a></li> </ul> </li> <li><a href="###">娱乐新闻</a></li> </ul> </li> <li class="ax-selected"><a href="###"><i class="ax-iconfont ax-icon-clock"></i>历史记录</a></li> <li><a href="###"><i class="ax-iconfont ax-icon-check-o-gap"></i>权限设置</a></li> <li><a href="###"><i class="ax-iconfont ax-icon-options"></i>参数配置</a></li> </ul> </span>