amazeui学习笔记--css（常用组件9）--导航nav

amazeui学习笔记--css（常用组件9）--导航nav

一、总结

 1、导航基本使用：

 添加 .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

3、标签式导航：在 .am-nav 的基础上添加 .am-nav-tabs，形成一个标签式的导航。激活的标签在 

 上添加 .am-active。<ul class="am-nav am-nav-tabs">

4、宽度自适应：在水平导航或标签式导航上添加 .am-nav-justify 让 

 平均分配宽度（通过display: table-cell 实现）。平均分配只在 media-up (> 640px) 有效，<= 640px 时菜单会垂直堆叠（缩小浏览器窗口效果可以查看效果）。

5、导航状态：

导航状态 class 添加在 

 上。

• .am-disabled - 禁用
• .am-active - 激活

6、 导航标题及分割线：

导航标题及分隔线目前仅适用于垂直菜单。

• .am-nav-header 导航标题，直接放在 
•  中。
• .am-nav-divider 导航分隔线，添加到空的 
•  上。

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">Headerli>
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

---

目录

• 基本样式
• 水平导航
• 标签式导航
• 宽度自适应
• 导航状态
• 导航标题及分隔线
• 下拉菜单
  • Tab 式

导航样式组件，在 

 链接列表中添加 .am-nav class。

基本样式

 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度，可以结合网格使用。
 Copy
• 首页
• 开始使用
• 按需定制

<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，形成一个水平导航。

 Copy
• 首页
• 开始使用
• 按需定制

<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，形成一个标签式的导航。激活的标签在 

•  上添加 .am-active。
   Copy
  • 首页
  • 开始使用
  • 按需定制

  <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 让 

•  平均分配宽度（通过display: table-cell 实现）。

  平均分配只在 media-up (> 640px) 有效，<= 640px 时菜单会垂直堆叠（缩小浏览器窗口效果可以查看效果）。

   Copy
  • 首页
  • 开始使用
  • 按需定制
  • 加入我们

  • 首页
  • 开始使用
  • 加入我们

  <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 添加在 

•  上。
  • .am-disabled - 禁用
  • .am-active - 激活
   Copy
  • 首页
  • 关于我们
  • 禁用链接

  <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 导航标题，直接放在 
  •  中。
  • .am-nav-divider 导航分隔线，添加到空的 
  •  上。
   Copy
  • 首页
  • 开始使用
  • 关于我们
  • 联系我们
  • 响应式
  • 移动优先

  <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 组件使用。

   Copy
  • 首页
  • 项目
  • 菜单 

  <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">Headerli> <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 式

   Copy
  • 首页
  • 项目
  • 菜单 

  <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>