網站導覽

大多數行動網站都包含網站導覽選單。這些選單可以有多種不同的形式。在本教學中，我們將嘗試以下範例，以在 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 頁面。您應該會看到類似這樣的內容：

側邊欄選單導覽

我們的頁面看起來很棒！讓我們新增最後的潤飾——自訂字型。

網站導覽

連結回首頁

使用側邊欄導覽