AMP-Selectorを使ってタブメニューを実装する方法
AMPコンポーネントのamp-selectorを利用してタブメニューでの表示切り替えを実装するサンプルコードです
See the Pen AMP-Selector by yochans (@yochans) on CodePen.
amp-selectorを読み込む
amp-selectorを利用するにはAMPコンポーネントのamp-selector-0.1.jsを読み込む必要があります
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
AMP-Selectorを使ったタブメニューのサンプルコード
AMP-Selectorを使ってタブメニューでの切り替え表示を実装するサンプルコードです
HTML
<amp-selector class="tabs" role="tablist"> <div id="tab1" role="tab" aria-controls="tabpanel1" option selected>TAB1</div> <div id="tabpanel1" role="tabpanel" aria-labelledby="tab1">TAB1表示エリア</div> <div id="tab2" role="tab" aria-controls="tabpanel2" option>TAB2</div> <div id="tabpanel2" role="tabpanel" aria-labelledby="tab2">TAB2表示エリア</div> <div id="tab2" role="tab" aria-controls="tabpanel3" option>TAB3</div> <div id="tabpanel3" role="tabpanel" aria-labelledby="tab3">TAB3表示エリア</div> </amp-selector>
CSS
/*全体*/
amp-selector[role=tablist].tabs {
display: flex;
flex-wrap: wrap;
}
/*タブボタン*/
amp-selector[role=tablist].tabs [role=tab] {
flex-grow: 1;
text-align: center;
font-weight: bold;
color:#808080;
}
/*タブボタン選択中*/
amp-selector[role=tablist].tabs [role=tab][selected] {
outline: none;
color:#00bfff;
}
/*表示エリア*/
amp-selector[role=tablist].tabs [role=tabpanel] {
background:#87cefa;
color:#808080;
padding:1rem;
height:200px;
display: none;
width: 100%;
order: 1;
}
/*表示エリア選択中*/
amp-selector[role=tablist].tabs [role=tab][selected] + [role=tabpanel] {
display: block;
}