網站導覽

大部分的行動網站都包含網站導覽選單。這些選單的形式非常多樣。在本教學課程中，我們將嘗試以下範例，在 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 元素 (由 sidebar1 ID 識別) 的 on 動作屬性，切換側邊欄。讓我們新增側邊欄。

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

側邊欄選單導覽

我們的網頁看起來很棒！讓我們新增最後一個潤飾 - 自訂字型。

網站導覽

連結回首頁

使用側邊欄導覽