AMP-Accordionを使ったアコーディオンメユーを実装する方法
AMPコンポーネントのamp-carouselを利用してカルーセルスライダーを実装するサンプルコードです
See the Pen AMP-Accordion by yochans (@yochans) on CodePen.
amp-carouselを読み込む
amp-carouselを利用するには、AMPコンポーネントのamp-carousel-0.1.jsを読み込む必要があります
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
AMP版アコーディオンメユーのサンプルコード①
HTML
<amp-accordion animate> <section> <div class="menu">MENU</div> <div> <p><a href="#">LINK1</a></p> <p><a href="#">LINK2</a></p> <p><a href="#">LINK3</a></p> </div> </section> </amp-accordion>
CSS
.menu{
padding:0.5rem;
}amp-accordionは<section>～</section>内にある1つ目の要素をメニューボタンとし、2つ目の要素が開閉領域として表示されます
見出し(h2など)や<p>など、<div>以外のものも適用されます（サンプルでは<div>囲い）
<amp-accordion>にanimateを指定することでアニメーション開閉を実装できます（ない場合は瞬時の開閉動作）
また<section>にexpandedを指定する事でページ読み込み時に開いた状態で表示させる事が可能です
AMP版アコーディオンメユーのサンプルコード②
単純に並べただけのパターンです
HTML
<amp-accordion class="accordion" animate> <section> <div class="menu">MENU1</div> <div> <p><a href="#">LINK1</a></p> <p><a href="#">LINK2</a></p> <p><a href="#">LINK3</a></p> </div> </section> <section> <div class="menu">MENU2</div> <div> <p><a href="#">LINK4</a></p> <p><a href="#">LINK5</a></p> <p><a href="#">LINK6</a></p> </div> </section> <section> <div class="menu">MENU3</div> <div> <p><a href="#">LINK7</a></p> <p><a href="#">LINK8</a></p> <p><a href="#">LINK9</a></p> </div> </section> </amp-accordion>