Navigation 导航
使用说明
导航是网站项目的必备组件，AXUI的导航是axMenu插件创建的，所以用法跟axMenu一样。关于axMenu用法请点击这里。
启用导航模式关键是设置nav的相关参数：
enable:true，启用导航菜单headerWidth:''，导航头部的宽度，默认无宽度设置，如果需要可填写带单位的宽度值，例如300px、30rem或autobodyWidth:''，下拉部分（ul）的宽度，默认160px，如果需要可填写带单位的宽度值，例如300px、30rem或automarginLeft:''，设定水平菜单中一级菜单之间的左间隔，填写举例：'28px'marginLeft:''，设定水平菜单中一级菜单之间的右间隔，填写举例：'28px'align: 'left'，设定导航菜单的文字对齐方式，默认左对齐，可选择center或right
<ul class="ax-menu" axMenu="nav:{enable:true}">
<li>
<div><i label>河北</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>石家庄</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>长安区</i></div>
</li>
<li>
<div><i label>桥西区</i></div>
</li>
<li>
<div><i label>新华区</i></div>
</li>
<li>
<div><i label>裕华区</i></div>
</li>
<li>
<div><i label>井陉矿区</i></div>
</li>
</ul>
</li>
<li>
<div><i label>邢台</i></div>
</li>
<li>
<div><i label>邯郸</i></div>
</li>
<li>
<div><i label>保定</i></div>
</li>
<li>
<div><i label>衡水</i></div>
</li>
</ul>
</li>
<li>
<div><i label>四川</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>成都</i></div>
</li>
<li>
<div><i label>南充</i></div>
</li>
<li>
<div><i label>绵阳</i></div>
</li>
</ul>
</li>
<li>
<div><i label>广西</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>南宁</i></div>
</li>
<li>
<div><i label>柳州</i></div>
</li>
</ul>
</li>
</ul>
列表居中
使用align:'center'类可以使菜单列表文字居中显示。适合只有一级菜单的时候。
<ul class="ax-menu" axMenu="nav:{enable:true,align:'center'}">
<li>
<div><i label>河北</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>石家庄</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>长安区</i></div>
</li>
<li>
<div><i label>桥西区</i></div>
</li>
<li>
<div><i label>新华区</i></div>
</li>
<li>
<div><i label>裕华区</i></div>
</li>
<li>
<div><i label>井陉矿区</i></div>
</li>
</ul>
</li>
<li>
<div><i label>邢台</i></div>
</li>
<li>
<div><i label>邯郸</i></div>
</li>
<li>
<div><i label>保定</i></div>
</li>
<li>
<div><i label>衡水</i></div>
</li>
</ul>
</li>
<li>
<div><i label>四川</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>成都</i></div>
</li>
<li>
<div><i label>南充</i></div>
</li>
<li>
<div><i label>绵阳</i></div>
</li>
</ul>
</li>
<li>
<div><i label>广西</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>南宁</i></div>
</li>
<li>
<div><i label>柳州</i></div>
</li>
</ul>
</li>
</ul>
自定义宽度
headerWidth属性定义一级菜单的宽度，bodyWidth定义下拉菜单的宽度。
<ul class="ax-menu" axMenu="nav:{enable:true,headerWidth:'220px',bodyWidth:'100%'}">
<li>
<div><i label>河北</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>石家庄</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>长安区</i></div>
</li>
<li>
<div><i label>桥西区</i></div>
</li>
<li>
<div><i label>新华区</i></div>
</li>
<li>
<div><i label>裕华区</i></div>
</li>
<li>
<div><i label>井陉矿区</i></div>
</li>
</ul>
</li>
<li>
<div><i label>邢台</i></div>
</li>
<li>
<div><i label>邯郸</i></div>
</li>
<li>
<div><i label>保定</i></div>
</li>
<li>
<div><i label>衡水</i></div>
</li>
</ul>
</li>
<li>
<div><i label>四川</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>成都</i></div>
</li>
<li>
<div><i label>南充</i></div>
</li>
<li>
<div><i label>绵阳</i></div>
</li>
</ul>
</li>
<li>
<div><i label>广西</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>南宁</i></div>
</li>
<li>
<div><i label>柳州</i></div>
</li>
</ul>
</li>
</ul>
自由菜单
启用nav之后一级菜单默认是自由伸缩的。
<ul class="ax-menu" axMenu="nav:{enable:true}">
<li>
<div><i label>适合一个人静夜月度的城市</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li><div><i label>石家庄</i></div></li>
<li><div><i label>邢台</i></div></li>
<li><div><i label>邯郸</i></div></li>
<li><div><i label>保定</i></div></li>
<li><div><i label>衡水</i></div></li>
</ul>
</li>
<li>
<div><i label>适合旅游城市</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li><div><i label>成都</i></div></li>
<li><div><i label>南充</i></div></li>
<li><div><i label>绵阳</i></div></li>
</ul>
</li>
<li>
<div><i label>体验乡土风情的城市</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li><div><i label>南宁</i></div></li>
<li><div><i label>柳州</i></div></li>
</ul>
</li>
</ul>
菜单间隔
使用marginLeft和marginRight属性定义下拉菜单之间的间隔。
<ul class="ax-menu" axMenu="nav:{enable:true,marginLeft:'28px',marginRight:'28px'}">
<li>
<div><i label>河北</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>石家庄</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>长安区</i></div>
</li>
<li>
<div><i label>桥西区</i></div>
</li>
<li>
<div><i label>新华区</i></div>
</li>
<li>
<div><i label>裕华区</i></div>
</li>
<li>
<div><i label>井陉矿区</i></div>
</li>
</ul>
</li>
<li>
<div><i label>邢台</i></div>
</li>
<li>
<div><i label>邯郸</i></div>
</li>
<li>
<div><i label>保定</i></div>
</li>
<li>
<div><i label>衡水</i></div>
</li>
</ul>
</li>
<li>
<div><i label>四川</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>成都</i></div>
</li>
<li>
<div><i label>南充</i></div>
</li>
<li>
<div><i label>绵阳</i></div>
</li>
</ul>
</li>
<li>
<div><i label>广西</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>南宁</i></div>
</li>
<li>
<div><i label>柳州</i></div>
</li>
</ul>
</li>
</ul>
鼠标经过展开
导航和menu一样默认click方式打开子菜单，可修改trigger属性为hover即可实现鼠标进入展开，离开自动关闭。
<ul class="ax-menu" axMenu="trigger:'hover',nav:{enable:true}">
<li>
<div><i label>河北</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>石家庄</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>长安区</i></div>
</li>
<li>
<div><i label>桥西区</i></div>
</li>
<li>
<div><i label>新华区</i></div>
</li>
<li>
<div><i label>裕华区</i></div>
</li>
<li>
<div><i label>井陉矿区</i></div>
</li>
</ul>
</li>
<li>
<div><i label>邢台</i></div>
</li>
<li>
<div><i label>邯郸</i></div>
</li>
<li>
<div><i label>保定</i></div>
</li>
<li>
<div><i label>衡水</i></div>
</li>
</ul>
</li>
<li>
<div><i label>四川</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>成都</i></div>
</li>
<li>
<div><i label>南充</i></div>
</li>
<li>
<div><i label>绵阳</i></div>
</li>
</ul>
</li>
<li>
<div><i label>广西</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li>
<div><i label>南宁</i></div>
</li>
<li>
<div><i label>柳州</i></div>
</li>
</ul>
</li>
</ul>