amp-sidebar
再度バー メニューをぺろんと出すことができます。
プラグインの読み込み
amp-sidebarを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
基本構文と動作
どんな書き方でどんな動きすんのかを。まず簡単なものを。
<button on='tap:sidebar1'>Open</button> <amp-sidebar id="sidebar1" layout="nodisplay" side="right"> <ul> <li> Nav item 1</li> <li> Nav item 2</li> <li> Nav item 3</li> <li> Nav item 4</li> <li> Nav item 5</li> <li> Nav item 6</li> </ul> </amp-sidebar>
動作デモ
ルールについて
実装するにあたり諸々のルールのお話を
- amp-sidebarを設置する所は、bodyの直下でなければならない
-
サイトバーの表示位置は右端、または左端のどちらかのみに表示される
設定によって変更可能 -
amp-sidebarには、以下のamp要素が含まれていて使用可能
<amp-accordion>
<amp-img>
<amp-fit-text>
<amp-list>
<amp-live-list>
<amp-social-share> - サイドバー自体の高さは100vhがデフォルトとなり、それをこえると垂直スクロールバーが表示されます。
-
サイドバーの幅は、CSSを使用して45px(最小値)と80vw(最大値)の間で設定および調整できます。
-
タッチズームはamp-sidebarサイドバーが開いているときはマスクされ、マスクは開いています。
なんのこっちゃ(´・ω・`)
サイドバーの開閉について
サイドバーは隠れていてとあるアクションで出てくるものです。それのトリガーについて。
open |
サイドバーを展開します。 デフォルトがopenの動きとなりますので、openの記述は不要。以下のどちらかの形となります。 <button on='tap:sidebar1'>Open</button> <button on='tap:sidebar1.open'>Open</button> |
---|---|
close |
サイドバーを閉じます。<button on='tap:sidebar1.close'>Close</button> |
toggle |
サイドバーの状態を変更させます。 【サイドバーが開いていれば閉じる】 【サイドバーが閉じていれば開く】 ってことです。 <button on='tap:sidebar1.toggle'>Close</button> |
各種プロパティについて
side |
サイドバーをどっちに出すのかを指定します。 指定できる値は、【left】または【right】です。 |
---|---|
open |
サイドバーが開いているときに付与されます。 デフォルトで付けてても開く事はないので注意してください。 |
data-close-button-aria-label |
アクセシビリティに使用されるオプションの属性で、閉じるボタンのARIAラベルを設定します。 Xとかだけで出ているボタンがほとんどかと思うのでソレ用のラベル設定となります。 |