网站导航

大多数移动网站都包含网站导航菜单。这些菜单可以采用许多不同的形式。在本教程中，我们将尝试以下在 AMP 页面中呈现导航的示例

返回主页的链接 - 最简单的选项。
使用 amp-sidebar 组件的侧边导航栏。

返回主页的链接

让用户访问网站常规导航选项的最简单方法是将他们导回您的主页！

尝试**替换**您的 <header> 标签，使其包含一个链接

<header class="headerbar">
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>
 <div class="site-name">News Site</div>
</header>

并将这些样式规则**添加**到您的内联 CSS 中

.home-button {
  margin-top: 8px;
}
.headerbar {
  height: 50px;
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
}
.site-name {
  margin: auto;
}
article {
  margin-top: 50px;
}

现在**刷新**页面。您应该会在页面的左上角看到一个指向 homepage.html 的链接。如果您点击主页图标，您会很快发现它不会将您带到任何地方（因为我们没有 homepage.html 文件）。

主页图标导航

此链接可以替换为您网站主页的 URL，以便您的用户可以通过您现有网站的导航来浏览网站的其他部分。

这是利用您现有网站导航的最简单方法。接下来，我们将探讨一种流行的网站导航选项。

一种常见的导航技术是添加一个菜单图标，当点击该图标时，会显示一组导航链接（从页面侧面）。在 AMP 中，我们可以使用 amp-sidebar 组件创建这样的导航。

首先，我们必须将 amp-sidebar 组件的 JavaScript **添加**到 <head> 标签

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

接下来，我们想要显示一个菜单图标。当点击该图标时，它将打开侧边栏。**替换** <header> 为以下代码，以显示一个“汉堡”图标而不是主页图标

<header class="headerbar">
  <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
  <div class="site-name">News Site</div>
</header>

在上面的代码中，我们通过 amp-sidebar 元素上的 on 操作属性来 toggle 侧边栏，该元素由 sidebar1 ID 标识。让我们添加侧边栏。

在 </header> 之后**添加**以下 HTML

<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
  <div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
  <ul class="sidebar">
    <li><a href="#">Example 1</a></li>
    <li><a href="#">Example 2</a></li>
    <li><a href="#">Example 3</a></li>
  </ul>
</amp-sidebar>

我们的侧边栏将被隐藏，但是当用户点击汉堡图标时，菜单将从屏幕的左侧出现。要关闭菜单，用户可以点击 X 图标。

最后，将这些样式规则**添加**到您的内联 CSS 中

.hamburger {
  padding-left: 10px;
}
.sidebar {
  padding: 10px;
  margin: 0;
}
.sidebar > li {
  list-style: none;
  margin-bottom:10px;
}
.sidebar a {
  text-decoration: none;
}
.close-sidebar {
  font-size: 1.5em;
  padding-left: 5px;
}

好的，让我们看看我们的侧边栏。**刷新**并重新加载您的 AMP 页面。您应该看到类似这样的内容

侧边栏菜单导航

我们的页面看起来很棒！让我们添加最后一个润色 - 自定义字体。

网站导航

返回主页的链接

使用侧边栏导航