重要事項：此文件不適用於您目前選取的格式 stories！

amp-sidebar

您現在可以在有效的 AMP 文件外使用此元件，方法是使用此元件的 Bento 版本。請參閱 Bento 指南，以瞭解詳情。

說明

提供一種方式來顯示旨在暫時存取的meta內容，例如導覽、連結、按鈕、選單。

必要指令碼

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

支援的版面配置

nodisplay

用法

提供一種方式來顯示旨在暫時存取的meta內容，例如導覽、連結、按鈕、選單。側邊欄可以透過按鈕點擊來顯示，而主要內容在視覺上保持在下方。

<amp-sidebar> 隱藏旨在暫時存取的meta內容 (導覽連結、按鈕、選單等)。<amp-sidebar> 可以透過按鈕點擊以及點擊 amp-sidebar 外部來開啟和關閉。但是，接受媒體查詢的選用屬性可用於在網站的其他部分顯示meta內容。子 <nav toolbar="(媒體查詢)" toolbar-target="elementID"> 元素允許在主要內容的其他部分顯示側邊欄中的內容。

側邊欄只能出現在頁面的左側或右側。
<amp-sidebar> 可能包含任何有效的 HTML 元素 (AMP 支援的元素)。
<amp-sidebar> 可能包含下列任何 AMP 元素
- <amp-accordion>
- <amp-img>
- <amp-fit-text>
- <amp-list>
- <amp-live-list>
- <amp-social-share>
側邊欄的最大高度為 100vh，如果高度超過 100vh，則會出現垂直捲軸。預設高度在 CSS 中設定為 100vh，並且可在 CSS 中覆寫。
側邊欄的寬度可以使用 CSS 設定和調整 (最小寬度為 45 像素)。
當側邊欄開啟時，會在 amp-sidebar 及其遮罩上停用觸控縮放。
建議 <amp-sidebar> 作為 <body> 的直接子項，以保留邏輯 DOM 順序 (為了無障礙功能) 並避免容器元素改變其行為。請注意，讓 amp-sidebar 的祖先元素設定了 z-index 可能會導致側邊欄出現在其他元素 (例如標頭) 的下方，從而破壞其功能。

範例

在以下範例中，我們使用 amp-sidebar 來包含導覽項目。但是，第二個和第四個項目「導覽項目 2」和「導覽項目 4」會指派給頁面上的元素 ID。透過使用 on 屬性，我們可以透過元素 ID 和 scrollTo 順暢地捲動到該元素。

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</amp-sidebar>

若要在點擊或按一下元素時切換、開啟或關閉側邊欄，請在元素上設定 on 動作屬性，並指定下列其中一種動作方法

動作	說明
open (預設)	開啟側邊欄
close	關閉側邊欄
toggle	切換側邊欄狀態

如果使用者點擊部分可見的主要內容區域，則會關閉側邊欄。

或者，按下鍵盤上的 Esc 鍵也會關閉側邊欄。

範例

<button class="hamburger" on="tap:sidebar1.toggle"></button>
<button on="tap:sidebar1">Open</button>
<button on="tap:sidebar1.open">Open</button>
<button on="tap:sidebar1.close">x</button>

您可以建立 toolbar 元素，使其顯示在 <body> 中，方法是指定具有媒體查詢的 toolbar 屬性和具有 <amp-sidebar> 子項之 <nav> 元素上元素 ID 的 toolbar-target 屬性。toolbar 會複製 <nav> 元素及其子項，並將元素附加到 toolbar-target 元素中。

行為

側邊欄可以透過新增具有 toolbar 屬性和 toolbar-target 屬性的 nav 元素來實作工具列。
nav 元素必須是 <amp-sidebar> 的子項，並遵循以下格式：<nav toolbar="(媒體查詢)" toolbar-target="elementID">。
- 例如，以下是工具列的有效用法：<nav toolbar="(max-width: 1024px)" toolbar-target="target-element">。
包含 toolbar 屬性的 nav 必須僅包含單一 <ul> 或 <ol> 元素，其中包含 <li> 元素。
- <li> 元素可能包含任何有效的 HTML 元素 (AMP 支援的元素)，或 <amp-sidebar> 支援的任何 AMP 元素。
工具列行為僅在 toolbar 屬性媒體查詢有效時套用。此外，頁面上必須存在具有 toolbar-target 屬性 ID 的元素，工具列才能套用。

範例：基本工具列

在以下範例中，如果視窗寬度小於或等於 767 像素，我們會顯示 toolbar。toolbar 包含搜尋輸入元素。toolbar 元素將會附加到 <div id="target-element"> 元素。

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..." />
      </li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element"></div>

<amp-sidebar> 元素內的 toolbar 元素，會根據 toolbar-target 元素是否顯示或隱藏，將類別套用至該元素。這對於在 toolbar 元素和 toolbar-target 元素上套用不同的樣式很有用。類別為 amp-sidebar-toolbar-target-shown 和 amp-sidebar-toolbar-target-hidden。當 toolbar-target 元素顯示時，amp-sidebar-toolbar-target-shown 類別會套用至 toolbar 元素。當 toolbar-target 元素隱藏時，amp-sidebar-toolbar-target-hidden 類別會套用至 toolbar 元素。此外，可以透過 amp-sidebar-mask 自訂遮罩的不透明度。

範例：工具列狀態類別

在以下範例中，如果視窗寬度小於或等於 767 像素，我們會顯示 toolbar。toolbar 包含搜尋輸入元素。toolbar 元素將會附加到 <div id="target-element"> 元素。但是，我們新增了一些自訂樣式，以在 <div id="toolbar-target"> 元素顯示時隱藏 toolbar 元素。

<style amp-custom="">
  .amp-sidebar-toolbar-target-shown {
    display: none;
  }
</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..." />
      </li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element"></div>

在溢位區域內自動捲動

amp-sidebar 可以自動將溢位容器捲動到第一個使用 autoscroll 裝飾的元素 (在側邊欄和工具列案例中皆是如此)。

當處理長導覽清單並希望側邊欄在頁面載入時捲動到目前的導覽項目時，此功能非常有用。

當使用 toolbar 功能時，autoscroll 僅在 <nav toolbar> 元素設定為 overflow: auto 或 overflow: scroll 時運作。

<style amp-custom="">
  nav [toolbar] {
    overflow: auto;
  }
</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li autoscroll class="currentPage">Nav item 4</li>
      <li>Nav item 5</li>
      <li>Nav item 6</li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element"></div>

如需可運作的範例程式碼，請參閱此範例檔案。

建立巢狀選單

<amp-sidebar> 透過名為 <amp-nested-menu> 的子元件支援向下切入 (巢狀) 選單。透過 <amp-nested-menu>，<amp-sidebar> 可以支援巢狀的一個或多個子選單層級 (以及它們之間的轉換)，如下列範例所示

當使用 amp-nested-menu 時，請將每個選單項目包裝在 li 元素中，以改善無障礙功能和鍵盤支援。

<button on="tap:sidebar1">Open Sidebar</button>
<amp-sidebar id="sidebar1" layout="nodisplay" style="width:300px">
  <amp-nested-menu layout="fill">
    <ul>
      <li>
        <h4 amp-nested-submenu-open>Open Sub-Menu</h4>
        <div amp-nested-submenu>
          <ul>
            <li>
              <h4 amp-nested-submenu-close>Go back</h4>
            </li>
            <li>
              <h4 amp-nested-submenu-open>Open Another Sub-Menu</h4>
              <div amp-nested-submenu>
                <h4 amp-nested-submenu-close>Go back</h4>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="https://amp.dev.org.tw/">Link</a>
      </li>
    </ul>
  </amp-nested-menu>
</amp-sidebar>

在 playground 中開啟此程式碼片段

如需巢狀選單的完整文件以及動態內容載入等進階功能，請參閱 <amp-nested-menu>。

使用者體驗考量

當使用 <amp-sidebar> 時，請記住，您的使用者通常會在 AMP 檢視器中透過行動裝置檢視您的頁面，這可能會顯示固定位置標頭。此外，瀏覽器通常會在頁面頂端顯示自己的固定標頭。在螢幕頂端新增另一個固定位置元素會佔用大量的行動裝置螢幕空間，但提供給使用者的內容卻沒有任何新資訊。

基於此原因，我們建議開啟側邊欄的機制不要放置在固定的全寬標頭中。

屬性

side

指出側邊欄應從頁面的哪一側開啟，left 或 right。如果未指定 side，則 side 值將繼承自 body 標籤的 dir 屬性 (ltr => left，rtl => right)；如果沒有 dir，則 side 預設為 left。

layout

指定側邊欄的顯示版面配置，必須為 nodisplay。

open

當側邊欄開啟時，此屬性會呈現。

data-close-button-aria-label

選用屬性，用於為為了無障礙功能而新增的關閉按鈕設定 ARIA 標籤。

toolbar

此屬性存在於子 <nav toolbar="(媒體查詢)" toolbar-target="elementID"> 元素上，並接受媒體查詢，以判斷何時顯示工具列。請參閱工具列章節，以瞭解使用工具列的更多資訊。

此屬性存在於子 <nav toolbar="(媒體查詢)" toolbar-target="elementID"> 上，並接受頁面上元素的 ID。toolbar-target 屬性會將工具列放置到頁面上指定 ID 的元素中，而不會有預設的工具列樣式。請參閱工具列章節，以瞭解使用工具列的更多資訊。

data-disable-swipe-close

在 amp-sidebar 上包含此屬性會停用滑動以關閉。當使用行動裝置或其他啟用觸控的裝置時，將停用滑動以關閉側邊欄的功能。

通用屬性

此元素包含擴充至 AMP 元件的通用屬性。

設定樣式

amp-sidebar 元件可以使用標準 CSS 設定樣式。

可以設定 amp-sidebar 的 width，以調整預設最小值 (45 像素) 和最大值 (80vw) 之間的寬度。
如果需要，可以設定 amp-sidebar 的高度，以調整側邊欄的高度。如果高度超過 100vw，側邊欄將會有垂直捲軸。側邊欄的預設高度為 100vw，並且可以在 CSS 中覆寫以使其更短。
側邊欄的目前狀態會透過 open 屬性公開，該屬性會在側邊欄在頁面上開啟時設定在 amp-sidebar 標記上。

如需您可以在 AMP 頁面中使用的回應式、預先設定樣式的導覽選單，請造訪 AMP Start。

驗證

請參閱 AMP 驗證器規格中的 amp-sidebar 規則。

需要更多協助嗎？

您已閱讀此文件十幾次，但它並沒有真正涵蓋您的所有問題？也許其他人也有相同的感受：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別感興趣的問題提供一次性的貢獻。

前往 GitHub

amp-sidebar 1.0 0.2 0.1

說明