Menu 菜单
使用说明 PLUGIN
在v1.0版本基础上使用原生方法重写了该插件,使得该插件更方便使用和升级。
菜单基本结构如下:
<ul class="ax-menu"> <li> <a href="###"><span class="ax-name">1.文字</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">1.1.文字</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">1.1.1.文字</span></a></li> <li><a href="###"><span class="ax-name">1.1.2.文字</span></a></li> <li><a href="###"><span class="ax-name">1.1.3.文字</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">1.2.文字</span></a></li> <li><a href="###"><span class="ax-name">1.3.文字</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">2.文字</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">2.1.文字</span></a></li> <li><a href="###"><span class="ax-name">2.2.文字</span></a></li> <li><a href="###"><span class="ax-name">2.3.文字</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">3.文字</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">3.1.文字</span></a></li> <li><a href="###"><span class="ax-name">3.2.文字</span></a></li> <li><a href="###"><span class="ax-name">3.3.文字</span></a></li> </ul> </li> </ul>
深色风格
使用ax-menu-dark
类可实现深色折叠菜单,背景色自行定义。
<ul class="ax-menu ax-menu-dark" axMenu style="background: #0b244d;"> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
不要左边距
使用ax-no-padding
类可去除左边距;深色风格不适合去除左边距!
<ul class="ax-menu ax-no-padding" axMenu> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
使用小点作为指示
使用ax-style-dot
类可使菜单用小点作为指示。
<ul class="ax-menu ax-style-dot" axMenu> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
使用ax-style-dot
和ax-no-padding
类。
<ul class="ax-menu ax-style-dot ax-no-padding" axMenu> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
对深色菜单使用ax-style-dot
类可使菜单用小点作为指示。
<ul class="ax-menu ax-menu-dark ax-style-dot" axMenu style="background: #0b244d;"> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
使用竖线作为指示
使用ax-style-line
类可使菜单用竖线作为指示。
<ul class="ax-menu ax-style-line" axMenu> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
使用ax-style-line
和ax-no-padding
类。
<ul class="ax-menu ax-style-line ax-no-padding" axMenu> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
对深色菜单使用ax-style-line
类可使菜单用竖线作为指示。
<ul class="ax-menu ax-menu-dark ax-style-line" axMenu style="background: #0b244d;"> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
八级管理
本框架定义了8级菜单管理,如果需要定义更多级别,请修改css。
<style> .ax-menu > li > a{ padding-left:14px; } .ax-menu > li > ul > li > a{ padding-left:calc(14px*3); } .ax-menu > li > ul > li > ul > li > a{ padding-left:calc(14px*5); } .ax-menu > li > ul > li > ul > li > ul > li > a{ padding-left:calc(14px*7); } .ax-menu > li > ul > li > ul > li > ul > li > ul > li > a{ padding-left:calc(14px*9); } .ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > a{ padding-left:calc(14px*11); } .ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a{ padding-left:calc(14px*13); } .ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a{ padding-left:calc(14px*15); } </style>
自定义宽度
本框架定义了菜单的宽度为220px,用户根据自己需要添加ax-full
可实现全宽效果。
<ul class="ax-menu ax-full" axMenu> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul> <ul class="ax-menu ax-menu-dark ax-full" axMenu style="background: #0b244d;"> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
或者修改ax-menu
的宽度,写入style
即可。
<ul class="ax-menu" axMenu style="width:400px;"> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
样式汇总
本框架菜单使用ul和li进行布局,对ul使用不同的样式将呈现不同结果,以下为样式说明:
样式 | 是否必须 | 说明 |
---|---|---|
ax-menu | 必须 | 基本样式 |
ax-menu-dark | 非 | 简约浅色风格 |
ax-no-padding | 非 | 是否保留左边距,适合浅色风格 |
ax-style-dot | 非 | 小点指示 |
ax-style-line | 非 | 竖线指示 |
互斥折叠
本菜单提供互斥折叠的属性:toggle。toggle默认是true,即互斥;使用toggle: false是可同时折叠展开。
<ul class="ax-menu ax-style-dot" axMenu data-toggle="false"> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
展开和折叠
菜单默认是折叠的,对要展开的a
节点使用ax-selected
即可展开该菜单以及所有父菜单。请观摩效果演示。
<ul class="ax-menu ax-style-dot" axMenu> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li class="ax-active"><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###" class="ax-selected"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
如果a标签有ID属性,那么可以使用active属性的方式打开该菜单。
<ul class="ax-menu ax-style-dot" axMenu data-active="#thisActive"> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###" id="thisActive"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
使用cookie
本菜单提供保持状态的属性:cookie。cookie默认为空,即不使用cookie;如果需要使用cookie,可给cookie参数设定一个唯一字符串,如此浏览器会记住用户对菜单的最后一次操作,点击菜单之后刷新浏览器依然可以保持当前状态,直到清除浏览器缓存。
<ul class="ax-menu ax-style-dot" axMenu data-cookie="cookie001"> <li> <a href="###" id="cookie01"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###" id="cookie02"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name" id="cookie03">长安区</span></a></li> <li><a href="###"><span class="ax-name" id="cookie04">桥西区</span></a></li> <li><a href="###"><span class="ax-name" id="cookie05">新华区</span></a></li> <li><a href="###"><span class="ax-name" id="cookie06">裕华区</span></a></li> <li><a href="###"><span class="ax-name" id="cookie07">井陉矿区</span></a></li> </ul> </li> <li><a href="###" id="cookie08"><span class="ax-name">邢台</span></a></li> <li><a href="###" id="cookie09"><span class="ax-name">邯郸</span></a></li> <li><a href="###" id="cookie10"><span class="ax-name">保定</span></a></li> <li><a href="###" id="cookie11"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###" id="cookie12"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###" id="cookie13"><span class="ax-name">成都</span></a></li> <li><a href="###" id="cookie14"><span class="ax-name">南充</span></a></li> <li><a href="###" id="cookie15"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###" id="cookie16"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###" id="cookie17"><span class="ax-name">南宁</span></a></li> <li><a href="###" id="cookie18"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
使用图标
使用ax-legend
类表示菜单图标。请观摩效果演示。
<ul class="ax-menu ax-style-dot" axMenu> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-global-f"></span><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-edit"></span><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-wifi"></span><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-check"></span><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-me"></span><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-search"></span><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul> <ul class="ax-menu ax-menu-dark" axMenu style="background: #0b244d;"> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-global-f"></span><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-edit"></span><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-wifi"></span><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-check"></span><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-me"></span><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-search"></span><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
使用徽章
使用ax-legend
类表示菜单图标。请观摩效果演示。
<ul class="ax-menu ax-style-dot" axMenu> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-global-f"></span><span class="ax-name">河北</span><span class="ax-dot ax-bg-danger"></span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li class="ax-active"><a href="###"><span class="ax-name">邢台</span><span class="ax-badge ax-badge-primary">New</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-edit"></span><span class="ax-name">四川</span><span class="ax-badge ax-badge-danger">21</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-wifi"></span><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-check"></span><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-legend ax-iconfont ax-icon-me"></span><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-search"></span><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
ajax追加
使用url
属性向菜单追加子菜单。url填写的是菜单的ajax文件地址。追加菜单(广东)
-
<script type="text/javascript"> var ajax = new axMenu('#menuAdd'); document.querySelector("#menuAjax").onclick = function() { ajax.update({ url: 'ax-menu-ajax.html' }); } </script>
-
<a href="###" class="ax-btn ax-primary ax-sm" id="menuAjax">追加菜单(广东)</a> <ul class="ax-menu ax-style-dot" id="menuAdd"> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
禁止使用
-
<script type="text/javascript"> var dispose = new axMenu('#menuDispose'); document.querySelector('#menuStop').onclick = function() { dispose.update({ dispose: true }); } document.querySelector('#menuStart').onclick = function() { dispose.update({ dispose: false }); } </script>
-
<a href="###" class="ax-btn ax-danger ax-sm" id="menuStop">禁止使用</a> <a href="###" class="ax-btn ax-primary ax-sm" id="menuStart">重新启用</a>< <ul class="ax-menu ax-style-dot" id="menuDispose"> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
禁止打开/关闭子菜单
对a
标签使用aria-disabled="true"
属性可禁止用户打开或者关闭子菜单;如果a标签有ID属性,则可通过disabled:'#xxx'属性方法禁止菜单。
<ul class="ax-menu ax-style-dot" axMenu> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###" aria-disabled="true"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###" class="ax-selected"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###" aria-disabled="true"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
监听方法
支持5个监听事件,show
点击展开事件,shown
展示完成事件,hide
点击折叠事件,hidden
折叠完成事件,selected
选择菜单事件。回调函数支持index参数,该参数表示点击时LI的顺序位置。请观摩效果演示。
-
<script type="text/javascript"> var event = new axMenu('#menuEvent'); event.on('show', function(i) { alert('开始展开第' + i + '个LI'); }).on('shown', function(i) { alert('已展开了第' + i + '个LI'); }).on('hide', function(i) { alert('开始折叠第' + i + '个LI'); }).on('hidden', function(i) { alert('已折叠了第' + i + '个LI'); }).on('selected', function(i) { alert('已经选择了第' + i + '个LI'); }); </script>
-
<ul class="ax-menu ax-style-dot" id="menuEvent"> <li> <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">长安区</span></a></li> <li><a href="###"><span class="ax-name">桥西区</span></a></li> <li><a href="###"><span class="ax-name">新华区</span></a></li> <li><a href="###"><span class="ax-name">裕华区</span></a></li> <li><a href="###"><span class="ax-name">井陉矿区</span></a></li> </ul> </li> <li><a href="###"><span class="ax-name">邢台</span></a></li> <li><a href="###"><span class="ax-name">邯郸</span></a></li> <li><a href="###"><span class="ax-name">保定</span></a></li> <li><a href="###"><span class="ax-name">衡水</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">成都</span></a></li> <li><a href="###"><span class="ax-name">南充</span></a></li> <li><a href="###"><span class="ax-name">绵阳</span></a></li> </ul> </li> <li> <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="###"><span class="ax-name">南宁</span></a></li> <li><a href="###"><span class="ax-name">柳州</span></a></li> </ul> </li> </ul>
参数说明
active: '',//初始化后显示那个菜单,'#id'或者'#id,.classname,node' disabled: '',//初始化后禁止那个菜单,'#id'或者'#id,.classname,node' toggle: true,//是否同时只显示一个菜单,默认是true cookie: '',//是否保存cookie,刷新页面保持之前的打开状态,填写唯一字符串,比如:'mycookie001' collapse: true,//初始化是否默认折叠所有ul,默认是true:折叠 trigger: 'click',//打开菜单是click点击显示还是hover滑过显示,默认是'click';hover只适合row:true的情况 dispose: false,//是否禁止使用,默认是false:启用 url: '',//异步追加菜单地址,html格式,填写举例:'/a/b/ajax.html' row: false,//是否以水平菜单显示,默认是false:垂直菜单显示 width: '',//设定水平菜单中一级菜单宽度,填写举例:'300px';row:true下有效 dropWidth: '',//设定水平菜单中下拉菜单宽度,填写举例:'300px';row:true下有效 gutter: '',//设定水平菜单中一级菜单之间的间隔,填写举例:'28px';row:true下有效
操作方法
名称 | 说明 | 参数说明 | 回调函数 |
---|---|---|---|
init() | 初始化 | 无参数 | 无回调函数 |
update(setting, callback) | 更新所有参数 | setting是用户自定义参数,是一个对象;callback是回调函数,可不填 | function(){} 无参数 |
on(type, handler) | 监听实例 | type是监听事件,具体可看前文的:监听方法;handler是回调函数 | function(index){} index:当前li的索引,可不填 |
axInstance(axMenus, name) | 获取实例 | axMenus是当页创建的所有实例;name是指插件元素axMenu属性的name值 | 无回调函数 |
- this:实例本身
- this.targetDom:菜单的Dom
- this.options:实例的参数