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>
