Navigation水平导航
nav导航模块来自Menu模块的水平布局，本质还是Menu模块，主要使用Menu模块原有参数中的row参数，其若干属性适合于设置水平导航的风格。
前言
本页导航模块来源于Menu模块的水平布局，与水平导航相关的参数有：
- nav：设置导航的视觉效果，设置
nav.enable:true或者nav:true可按默认值启用 - trigger：显示子菜单的触发方式，可设为
hover - pageClose：是否在菜单之外任意位置点击均可折叠菜单，默认false，可设置true开启。
参数属性
与水平导航相关的row参数的属性如下：
| 属性名(prop) | 值类型 | 默认值 | 说明 |
|---|---|---|---|
| enable | boolean | false | 是否启用水平菜单 |
| headWidth | string | '' | 导航头宽度，例如300px |
| bodyWidth | string | '' | 导航内容宽度，例如300px |
| marginLeft | string | '' | 导航左边距，例如28px |
| marginRight | string | '' | 导航右边距，例如28px |
| align | 'left'/'center'/'right' | 'left' | 子导航文本排序 |
简单使用
直接设置nav:true便可将垂直菜单转为水平导航。
标准多级菜单
使用ul + li + div + rep="label"节点创建标准多级菜单。
使用完整的结构
rep=icon、rep=disk、rep=cube、rep=tips和ax-badge是可选节点。
- 输出
- HTML
文本排列
导航文本默认是左排列，使用align参数实现文本左(left)中(center)右(right)排列。
如果多个导航发生重叠，需要手动设置zIndex属性。
- 输出
- HTML
自定义宽度
headWidth属性定义一级菜单的宽度，bodyWidth定义下拉菜单的宽度。
鼠标经过展开
导航和menu一样默认click方式打开子菜单，可修改trigger属性为hover即实现：鼠标进入展开，离开自动关闭。
自由菜单
一级主菜单的宽度是可以自由伸缩的。
菜单间隔
使用marginLeft和marginRight属性定义下拉菜单之间的间隔。
自动折叠
子菜单默认下需要通过toggle父菜单进行展开和折叠，如果需要在菜单之外任意地方点击均折叠，可设置参数pageClose:true。
深色背景
如果导航菜单位于深色背景中，此时可能需要自定义第一层菜单的相关CSS变量。
- --_menu-c-1st：第一层菜单的文本色
- --_menu-theme-1st：第一层菜单的主题色
- --_menu-bg-1st：第一层菜单的背景色，默认为透明色
- --_menu-c-sel-1st：第一层菜单被选中的文本色
- --_menu-c-hov-1st：第一层菜单悬停文本色
- --_menu-c-caption-1st：第一层菜单指示箭头颜色
- --_menu-c-brief-1st：第一层菜单图标颜色
