AMP-Accordionを使ったアコーディオンメユーを実装する方法

2019-04-13AMPAMPコンポーネント

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>

2019-04-13AMPAMPコンポーネント

Posted by Yousuke.U