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="(media query)" 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 順序 (為了協助工具)，並避免容器元素改變其行為。請注意，讓 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 元素，透過指定具有媒體查詢的 toolbar 屬性和具有 <amp-sidebar> 子元素 <nav> 上元素 ID 的 toolbar-target 屬性，在 <body> 中顯示。toolbar 會複製 <nav> 元素及其子元素，並將元素附加到 toolbar-target 元素中。

行為

側邊欄可以透過新增具有 toolbar 屬性和 toolbar-target 屬性的 nav 元素來實作工具列。
nav 元素必須是 <amp-sidebar> 的子元素，並遵循以下格式：<nav toolbar="(media-query)" 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 標籤。

toolbar

此屬性會呈現在子 <nav toolbar="(media-query)" toolbar-target="elementID"> 元素上，並接受何時顯示工具列的媒體查詢。請參閱工具列章節，以取得使用工具列的詳細資訊。

此屬性會呈現在子 <nav toolbar="(media-query)" toolbar-target="elementID"> 上，並接受頁面上元素的 ID。toolbar-target 屬性會將工具列放置到頁面上指定 ID 的元素中，而不會有預設的工具列樣式。請參閱工具列章節，以取得使用工具列的詳細資訊。

data-disable-swipe-close

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

通用屬性

此元素包含通用屬性，其延伸至 AMP 元件。

設定樣式

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

可以設定 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

說明