amazeui学习笔记--css（常用组件9）--导航nav
一、总结
1、导航基本使用：<ul> 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度，可以结合网格使用。还是ul包li的形式。
2、水平导航：在 .am-nav 的基础上再添加 .am-nav-pills，形成一个水平导航。<ul class="am-nav am-nav-pills">各种li</ul>
3、标签式导航：在 .am-nav 的基础上添加 .am-nav-tabs，形成一个标签式的导航。激活的标签在 <li> 上添加 .am-active。<ul class="am-nav am-nav-tabs"></ul>
4、宽度自适应：在水平导航或标签式导航上添加 .am-nav-justify 让 <li> 平均分配宽度（通过display: table-cell 实现）。平均分配只在 media-up (> 640px) 有效，<= 640px 时菜单会垂直堆叠（缩小浏览器窗口效果可以查看效果）。
5、导航状态：
导航状态 class 添加在 <li> 上。
.am-disabled- 禁用.am-active- 激活
6、 导航标题及分割线：
导航标题及分隔线目前仅适用于垂直菜单。
.am-nav-header导航标题，直接放在<li>中。.am-nav-divider导航分隔线，添加到空的<li>上。
7、下拉菜单：需结合 JS 组件使用。
1
- 2
- 首页 3
- 项目 4
- 5 6 菜单 7 8
- 9
- Header 10
- 1. 一行代码，简单快捷 11
- 2. 网址不变且唯一 12
- 3. 内容实时同步更新 13
- 4. 云端跨平台适配 14 15
- 5. 专属的一键拨叫 16
18
二、导航nav
Nav
目录
导航样式组件，在 <ul> 链接列表中添加 .am-nav class。
基本样式
<ul> 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度，可以结合网格使用。
水平导航
在 .am-nav 的基础上再添加 .am-nav-pills，形成一个水平导航。
标签式导航
在 .am-nav 的基础上添加 .am-nav-tabs，形成一个标签式的导航。激活的标签在 <li> 上添加 .am-active。
宽度自适应
在水平导航或标签式导航上添加 .am-nav-justify 让 <li> 平均分配宽度（通过display: table-cell 实现）。
平均分配只在 media-up (> 640px) 有效，<= 640px 时菜单会垂直堆叠（缩小浏览器窗口效果可以查看效果）。
导航状态
导航状态 class 添加在 <li> 上。
.am-disabled- 禁用.am-active- 激活
导航标题及分隔线
导航标题及分隔线目前仅适用于垂直菜单。
.am-nav-header导航标题，直接放在<li>中。.am-nav-divider导航分隔线，添加到空的<li>上。
- 开始使用
下拉菜单
需结合 JS 组件使用。