レスポンシブのタブメニューの実装です。タブの切り替えでコンテンツをフェードインして表示する動作になります。コンテンツのフェードインはCSSのtransitionを利用します。
タイトル01
ダミーテキストダミーテキストダミーテキスト
タイトル02
ダミーテキストダミーテキストダミーテキストダミーテキスト
タイトル03
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
htmlのコードは下記になります。
複数のタブメニューを配置することも想定して、タブメニューとそれに対応するコンテンツは個別化します。タブのulタグにdata-tab=”tab01″のようにカスタムデータ属性を付与し、コンテンツ全体のdivタグにid=”tab01″を付与します。
また選択状態のタブのliタグにはclass=”selected”、表示状態のコンテンツのdivタグにはclass=”is-show”を付与します。
<ul class="tab_menu" data-tab="tab01">
<li id="tab1" class="selected"><img src="arrow.png" alt="">タイトル01</li>
<li id="tab2"><img src="arrow.png" alt="">タイトル02</li>
<li id="tab3"><img src="arrow.png" alt="">タイトル03</li>
</ul>
<div class="tab_panel_container" id="tab01">
<div class="tab_panel is-show">
<p class="title">タイトル01</p>
<p>ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="tab_panel">
<p class="title">タイトル02</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="tab_panel">
<p class="title">タイトル02</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
</div>
続いてCSSのコードです。
コンテンツのdivタグにoverflow: hidden;、height: 0;、opacity: 0;を設定し、クラス名is-showを付与した表示するコンテンツのdivタグにoverflow: visible;、height: auto;、opacity: 1;を設定するのがポイントです。コンテンツのフェードインはtransitionでopacityを操作します。非表示のコンテンツはheightの設定がないと 透明になるだけで領域が残ってしまうため注意が必要です。
.tab_menu {
display: flex;
width: 100%;
margin: 0 0 1em;
}
.tab_menu li{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 12px 0 8px;
margin: 0 1px 0 0;
list-style: none;
cursor: pointer;
color: #fff;
background: #ccb591;
font-size: 125%;
}
.tab_menu li:last-child {
margin-right: 0;
}
.tab_menu li.selected {
background: #b79662;
}
.tab_menu li:hover {
background: #b79662;
}
.tab_menu li img {
display: inline-block;
padding: 0 5px 2px 0;
}
.tab_panel {
overflow: hidden;
height: 0;
opacity: 0;
}
.tab_panel.is-show {
overflow: visible;
height: auto;
opacity: 1;
transition: opacity .4s ease-in-out;
}
最後にjQueryのコードです。
タブのulタグのカスタムデータ属性はdataメソッドで取得し、取得したデータの先頭に#を付けてコンテンツ全体のdivタグに付与したidと紐づけます。あとは選択状態のタブのliタグにクラス名selected、表示状態のコンテンツのdivタグにクラス名is-showを付与します。
$(function() {
$('.tab_menu li').on('click tap', function() {
var tabmenu = $(this).parents('.tab_menu');
var datatab = $(tabmenu).data('tab');
var tabpanel = $('#' + datatab);
var index = $(this).index();
tabmenu.children().removeClass('selected');
$(this).addClass('selected');
tabpanel.children().removeClass('is-show');
tabpanel.children().eq(index).addClass('is-show');
});
});