網站導覽

多數行動版網站都包含網站導覽選單。這些選單的形式相當多樣。在本教學課程中，我們會試用下列範例，在 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 識別。接下來加入側邊欄。

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

側邊欄選單導覽

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

網站導覽

連結回首頁

使用側邊欄導覽