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>