# 顶部导航条

网站或应用顶部的导航：左侧标志，中间链接（当前页下方有滑动的下划线），右侧放搜索、通知、头像等你自己的内容。有嵌套 <ul> 的链接自动成为下拉菜单；宽度小于 768px 时链接收进汉堡按钮打开的侧滑抽屉。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<header class="zh-nav" data-zh-nav aria-label="主导航">
  <a class="zh-nav-logo" href="#"><i aria-hidden="true"></i><span>ZhaoUI</span></a>
  <ul class="zh-nav-links">
    <li><a class="zh-nav-link" href="#" aria-current="page" data-icon="layout-dashboard">概览</a></li>
    <li><button class="zh-nav-link" type="button" data-icon="file-text">产品<i data-i="chevron-down"></i></button>
      <ul><li><a href="#">中控台</a></li><li><a href="#">数据分析</a></li></ul></li>
    <li><a class="zh-nav-link" href="#">价格</a></li>
  </ul>
  <div class="zh-nav-right"><button class="zh-nav-avatar" type="button" aria-label="账户">ZW</button></div>
</header>
```

## 样式类

`zh-nav`、`zh-nav-logo`、`zh-nav-links`、`zh-nav-link`、`zh-nav-right`、`zh-nav-iconbtn`、`zh-nav-avatar`、`zh-nav-search`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-zh-nav` | <header class="zh-nav"> 或 <nav> |  | 声明为导航条；直接子元素按顺序放 .zh-nav-logo、ul.zh-nav-links、.zh-nav-right |
| `zh-nav-link` | <a> 或 <button>（class） |  | 一个导航项；当前页加 aria-current="page" |
| `嵌套 <ul>` | 含子链接的 <li> 里 | 里面放 <a href> | 把外层的 zh-nav-link 变成下拉菜单触发器；手机抽屉里变成可展开的二级 |
| `data-icon` | <a> / 顶层 zh-nav-link | 图标名 | 抽屉里该项前的图标（桌面端不显示） |
| `zh-nav-iconbtn` | <button>（class） | 里面放 <i data-i> | 右侧的图标按钮，如通知；必须有 aria-label |
| `zh-nav-avatar` | <button>（class） | 缩写文字 | 圆形头像按钮，可配合 data-zh-dropdown 做账户菜单 |
| `zh-nav-search` | <button>（class） | 图标、提示文字和 zh-kbd | 外观像搜索框的按钮，点击后打开你自己的搜索；手机宽度自动隐藏 |

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:nav-select` | 导航条 | undefined | 点击链接（桌面或抽屉里）。href 为 # 或为空时库不跳转，只切换当前页 |

## 无障碍

- 导航条要有 aria-label；当前页用 aria-current="page" 标出，不只靠下划线颜色
- 汉堡按钮带 aria-expanded 和 aria-controls；抽屉打开后焦点被限制在里面，Esc 或点击遮罩关闭并把焦点还给按钮
- 下拉菜单：回车或点击展开，↓ 进入菜单项，Esc 关闭
- 导航条本身不固定位置；需要吸顶时加 zh-sticky zh-top-0（公共类），或自己写 position: sticky
- 不含超大菜单（带图标和说明的多列面板）和全局搜索面板；这些请自己用气泡卡片或对话框做

## 常见问题

### 顶部导航条是什么？

网站或应用顶部的导航：左侧标志，中间链接（当前页下方有滑动的下划线），右侧放搜索、通知、头像等你自己的内容。有嵌套 <ul> 的链接自动成为下拉菜单；宽度小于 768px 时链接收进汉堡按钮打开的侧滑抽屉。

### 怎么使用顶部导航条？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 顶部导航条有哪些事件？

zh:nav-select（点击链接（桌面或抽屉里）。href 为 # 或为空时库不跳转，只切换当前页）。

### 顶部导航条支持键盘和读屏吗？

导航条要有 aria-label；当前页用 aria-current="page" 标出，不只靠下划线颜色；汉堡按钮带 aria-expanded 和 aria-controls；抽屉打开后焦点被限制在里面，Esc 或点击遮罩关闭并把焦点还给按钮；下拉菜单：回车或点击展开，↓ 进入菜单项，Esc 关闭。

### 顶部导航条需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。