Menu 菜单
使用说明 PLUGIN
metisMenu是非常优秀的折叠菜单插件，本框架在v3.0.5基础上进行了改造和深度整合，详见官网或Github。本框架的折叠菜单可适用于管理系统的主菜单和网站产品目录，一共定义了8级子菜单，已满足日常需要。以下是对该插件的修改项。
- 修改了class类名和函数名
- 增加了cookie参数，可保持展开状态
- 增加了trigger参数，默认click（点击展开关闭），可选hover
- 增加了row参数，设置菜单是否横向布局
- 增加了width参数，设置一级菜单宽度（设置row为true后有效）
- 增加了dropWidth参数，设置子菜单宽度（设置row为true后有效）
- 增加了gutter参数，设置菜单间距（设置row为true后有效）
- 对菜单使用了axScroll()方法
引入ax.min.js之后，对菜单标签使用ax-menu类即可。
菜单基本结构如下：
<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类可实现深色折叠菜单，背景色自行定义。
-
<script type='text/javascript'> $("#menu02").axMenu(); </script> -
<ul class="ax-menu ax-menu-dark" id="menu02" 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类可去除左边距;深色风格不适合去除左边距！
-
<script type='text/javascript'> $("#menu03").axMenu(); </script> -
<ul class="ax-menu ax-no-padding" id="menu03"> <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类可使菜单用小点作为指示。
-
<script type='text/javascript'> $("#menu04").axMenu(); </script> -
<ul class="ax-menu ax-style-dot" id="menu04"> <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类。
-
<script type='text/javascript'> $("#menu05").axMenu(); </script> -
<ul class="ax-menu ax-style-dot ax-no-padding" id="menu05"> <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类可使菜单用小点作为指示。
-
<script type='text/javascript'> $("#menu06").axMenu(); </script> -
<ul class="ax-menu ax-menu-dark ax-style-dot" id="menu06"> <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类可使菜单用竖线作为指示。
-
<script type='text/javascript'> $("#menu07").axMenu(); </script> -
<ul class="ax-menu ax-style-line" id="menu07"> <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类。
-
<script type='text/javascript'> $("#menu08").axMenu(); </script> -
<ul class="ax-menu ax-style-line ax-no-padding" id="menu08"> <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类可使菜单用竖线作为指示。
-
<script type='text/javascript'> $("#menu09").axMenu(); </script> -
<ul class="ax-menu ax-menu-dark ax-style-line" id="menu09"> <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可实现全宽效果。
-
<script type='text/javascript'> $("#menu11,#menu12").axMenu(); </script> -
<ul class="ax-menu ax-full" id="menu11"> <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" id="menu12" 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即可。
-
<script type='text/javascript'> $("#menu13").axMenu(); </script> -
<ul class="ax-menu" id="menu13" 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是可同时折叠展开。
-
<script type='text/javascript'> $(function () { $('#menu-toggle').axMenu({ toggle: false }); }); </script> -
<ul class="ax-menu ax-style-dot" id="menu-toggle"> <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>
展开和折叠
菜单默认是折叠的，对要展开的父级li使用ax-active即可展开该菜单。请观摩效果演示。
-
<script type='text/javascript'> $(function () { $('#menu15').axMenu(); }); </script> -
<ul class="ax-menu ax-style-dot" id="menu15"> <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 class="ax-active"><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>
当前菜单
菜单默认是折叠的，对要指示当前菜单的li使用ax-active类即可，用法与展开折叠一致。请观摩效果演示。
-
<script type='text/javascript'> $(function () { $('#menu16').axMenu(); }); </script> -
<ul class="ax-menu ax-style-dot" id="menu16"> <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 class="ax-active"><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>
也可以通过js对指定的li使用ax-active类实现效果。注意是先加载ax-active类，不能搞错顺序。
-
<script type="text/javascript"> $(document).ready(function () { $('#thisActive').addClass("ax-active"); $('#menuNow').axMenu(); }); </script> -
<ul class="ax-menu ax-style-dot" id="menuNow"> <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 id="thisActive"><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>
使用cookie
本菜单提供保持状态的属性：cookie。cookie默认是false，即不使用cookie，刷新页面重新加载。对菜单中的a标签设定唯一id，设定cookie:true之后，浏览器会记住用户对菜单的最后一次操作，点击菜单之后刷新浏览器依然可以保持当前状态，直到清除浏览器缓存。
-
<script type="text/javascript"> $(document).ready(function () { $('#menuCookie').axMenu({cookie: true }); }); </script> -
<ul class="ax-menu ax-style-dot" id="menuCookie"> <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类表示菜单图标。请观摩效果演示。
-
<script type="text/javascript"> $(document).ready(function () { $('#menu18,#menu19').axMenu(); }); </script> -
<ul class="ax-menu ax-style-dot" id="menu18"> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-global-fill"></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" id="menu19" style="background: #0b244d;"> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-global-fill"></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类表示菜单图标。请观摩效果演示。
-
<script type="text/javascript"> $(document).ready(function () { $('#menu20').axMenu(); }); </script> -
<ul class="ax-menu ax-style-dot" id="menu20"> <li> <a href="###"><span class="ax-legend ax-iconfont ax-icon-global-fill"></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追加
使用jquery的ajax方法向菜单追加子菜单。追加菜单(广东)
-
<script type="text/javascript"> $("#menuAjax").one('click', function() { var $this = $(this); $.ajax({ url: "ax-menu-ajax.html", success: function(result) { $('#menuAdd').axMenu('dispose'); $("#menuAdd").append(result); $('#menuAdd').axMenu(); } }); }); </script> -
<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"> $('#menuDispose').axMenu(); $('#menuStop').on('click', function () { $('#menuDispose').axMenu('dispose'); }); $('#menuStart').on('click', function () { $('#menuDispose').axMenu(); }); </script> -
<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"属性可禁止用户打开或者关闭子菜单。
-
<script type="text/javascript"> $('#menuDispose').axMenu(); $('#menuStop').on('click', function () { $('#menuDispose').axMenu('dispose'); }); $('#menuStart').on('click', function () { $('#menuDispose').axMenu(); }); </script> -
<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>
事件
支持4个事件，show.axMenu点击展开事件，shown.axMenu展示完成事件，hide.axMenu点击折叠事件，hidden.axMenu折叠完成事件。请观摩效果演示。
-
<script type="text/javascript"> $('#menuEvent').axMenu().on('show.axMenu', function() { alert("点击并立即展开"); }).on('shown.axMenu', function(event) { alert("已经完全展开了"); }).on('hide.axMenu', function(event) { alert("点击并立即折叠"); }).on('hidden.axMenu', function(event) { alert("已经完全折叠了"); }); </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>
参数汇总
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| toggle | 是否可展开多个子菜单 true：只能打开一个子菜单； false：同时打开多个子菜单； |
boolean | true |
| cookie | 是否保持上一次状态 true：启用cookie，保留上一次操作状态； false：不启用cookie； |
boolean | false |
| dispose | 是否停止使用菜单 | - | - |
| row | 是否横向导航 | boolean | false |
| trigger | 展开模式，默认点击展开，可选hover | string | click |
| width | 一级菜单宽度（只对横向导航有效），比如180px | number | '' |
| dropWidth（只对横向导航有效），比如220px，支持百分比 | 下拉菜单宽度 | number | '' |
| gutter | 横向导航的间距（只对横向导航有效），比如14px | number | '' |