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