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下有效
如果在菜单元素上通过data-*使用属性，层级使用短横区分，比如要设置cookie，那么在菜单元素的data属性中应该这样书写：data-cookie="mycookie001"
操作方法
| 名称 | 说明 | 参数说明 | 回调函数 |
|---|---|---|---|
| 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：实例本身
- this.targetDom：菜单的Dom
- this.options：实例的参数