【タブメニュー】コンテンツのフェードインをCSSで実装

レスポンシブのタブメニューの実装です。タブの切り替えでコンテンツをフェードインして表示する動作になります。コンテンツのフェードインはCSSのtransitionを利用します。

  • タイトル01
  • タイトル02
  • タイトル03

タイトル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');
	});
});
タイトルとURLをコピーしました