Navigation 导航
使用说明 PLUGIN
metisMenu是非常优秀的折叠菜单插件，本框架在v3.0.5基础上进行了改造和深度整合，详见官网或Github。以下是对该插件的修改项。
- 修改了class类名和函数名
- 增加了cookie参数，可保持展开状态
- 增加了trigger参数，默认click（点击展开关闭），可选hover
- 增加了row参数，设置菜单是否横向布局
- 增加了width参数，设置一级菜单宽度（设置row为true后有效）
- 增加了dropWidth参数，设置子菜单宽度（设置row为true后有效）
- 增加了gutter参数，设置菜单间距（设置row为true后有效）
- 对菜单使用了axScroll()方法
本框架默认定义水平菜单宽度为180px。引入ax.min.js之后，对菜单标签使用ax-menu类，使用row:true方法即可。
-
<script type='text/javascript'> $(document).ready(function () { $("#menu01").axMenu({ row:true, }); }); </script> -
<ul class="ax-menu ax-menu-light " id="menu01"> <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><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> </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-center类可以使菜单列表文字居中显示。适合只有一级菜单的时候。
-
<script type='text/javascript'> $(document).ready(function () { $("#menu02").axMenu({ row:true, }); }); </script> -
<ul class="ax-menu ax-menu-light ax-menu-center" id="menu02"> <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><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>
自定义宽度
width属性定义一级菜单的宽度，dropWidth定义下拉菜单的宽度。
-
<script type='text/javascript'> $(document).ready(function () { $("#menu03").axMenu({ row:true, width:'220px', dropWidth:'260px', }); }); </script> -
<ul class="ax-menu ax-menu-light " 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><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> </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>
自由菜单
使用width:'auto'属性即可实现自由宽度的菜单。
-
<script type='text/javascript'> $(document).ready(function () { $("#menu04").axMenu({ row:true, width:'auto', }); }); </script> -
<ul class="ax-menu ax-menu-light" 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></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><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>
菜单间隔
使用gutter属性定义下拉菜单之间的间隔。
-
<script type='text/javascript'> $(document).ready(function () { $("#menu05").axMenu({ row:true, width:'220', gutter:'14px', }); }); </script> -
<ul class="ax-menu ax-menu-light" 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></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><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-btn类即可。可组合使用也可以单独使用。
-
<script type='text/javascript'> $(document).ready(function () { $("#menu06").axMenu({ row:true, width:'auto', }); $("#menu07").axMenu({ row:true, width:'auto', }); }); </script> -
<ul class="ax-menu ax-menu-light" id="menu06"> <li><a href="###" class="ax-btn"><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="###" class="ax-btn"><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="###" class="ax-btn"><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> <div class="ax-break"></div> <ul class="ax-menu ax-menu-light" id="menu07"> <li><a href="###" class="ax-btn"><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> </ul>
鼠标经过展开
使用trigger属性为hover即可，该属性默认是click：点击展开。
-
<script type='text/javascript'> $(document).ready(function () { $("#menu08").axMenu({ row:true, width:'180', trigger:"hover" }); }); </script> -
<ul class="ax-menu ax-menu-light " 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><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> </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>