導覽您的網站

多數行動版網站都會加入網站導覽選單。這些選單可以採用許多不同的形式。在本教學課程中，我們會試用下列範例，示範如何在 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 檔案)。

首頁圖示導覽

這個連結可以替換成您網站首頁的網址，讓使用者透過您現有網站的導覽功能，瀏覽您網站的其他部分。

這是最簡單的方法，可以充分利用您現有的網站導覽功能。接下來，我們會探索另一個熱門的網站導覽選項。

常見的導覽技巧是加入一個選單圖示，使用者點擊後就會顯示一組導覽連結 (從網頁側邊滑出)。在 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>

在上述程式碼中，我們透過 on 動作屬性來切換側邊欄，這個屬性位於 amp-sidebar 元素上，並由 sidebar1 ID 識別。接下來加入側邊欄。

將下列 HTML 程式碼新增至 </header> 之後

<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 網頁。您應該會看到類似這樣的畫面

側邊欄選單導覽

我們的網頁看起來很棒！最後我們再加入一個小細節 - 自訂字型。

導覽您的網站

連結回首頁

使用側邊欄導覽