BLOG

ブログ

AMPサイトでのサイドバー

AMPサイトでのサイドバー

ボタンをクリックすることでサイドからメニューを表示非表示されるようにする。

head内に <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script> を記述する

サイドバーは1つのページにつき1つのみ設置が可能です

「amp-sidebar」は「body」の直接の子でなければいけません
「layout」は「nodisplay」を指定する


<amp-sidebar id="sidebar" layout="nodisplay">
<h2>目次</h2>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
</amp-sidebar>

開くためのボタンはsidebar要素とは別で用意します
a要素またはbutton要素を用意し、on属性を付ける

<button on="tap:sidebar.open">開くボタン</button>

開くためのボタンもsidebar要素とは別で用意します
これはサイドバーの中に設置する
大体は開くボタンと同じです

<button on="tap:sidebar.close">閉じるボタン</button>

「.open」「.close」の部分を「.toggle」にすることで開いているときは閉じて閉じているときは開く開閉ボタンにすることができます。

▲PAGE TOP

©ITコンサルタントの網樹屋