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

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 設定和調整 (最小寬度為 45px)。
當側邊欄開啟時，在 amp-sidebar 及其遮罩上停用觸控縮放。
建議 <amp-sidebar> 作為 <body> 的直接子項，以保留邏輯 DOM 順序 (以實現可存取性)，並避免容器元素改變其行為。請注意，設定了 z-index 的 amp-sidebar 祖先可能會導致側邊欄出現在其他元素 (例如標頭) 下方，從而破壞其功能。

範例

在以下範例中，我們使用 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 元素，該元素透過指定具有媒體查詢的 toolbar 屬性和具有 <amp-sidebar> 子項 <nav> 元素上的元素 ID 的 toolbar-target 屬性，在 <body> 中顯示。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 的元素，工具列才能套用。

範例：基本工具列

在以下範例中，如果視窗寬度小於或等於 767px，我們將顯示 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 自訂遮罩的不透明度。

範例：工具列狀態類別

在以下範例中，如果視窗寬度小於或等於 767px，我們將顯示 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 標籤)

選用屬性，用於設定為可存取性新增的關閉按鈕的 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 (寬度)，以調整預設最小值 (45px) 和最大值 (80vw) 之間的寬度。
可以設定 amp-sidebar 的高度，以在需要時調整側邊欄的高度。如果高度超過 100vw，則側邊欄將具有垂直捲軸。側邊欄的預設高度為 100vw，並且可以在 CSS 中覆寫以使其更短。
側邊欄的目前狀態會透過 open (開啟) 屬性公開，當頁面上的側邊欄開啟時，該屬性會在 amp-sidebar 標記上設定。

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

驗證

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

需要更多協助嗎？

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

前往 Stack Overflow

發現錯誤或缺少功能？

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

前往 GitHub

amp-sidebar 1.0 0.2 0.1

說明