【タブメニュー】SP表示でセレクトボックスに切り替え

レスポンシブのタブメニューでSP表示の場合はセレクトボックスにします。タブメニュー、セレクトボックス、どちらも同一のコンテンツを表示します。

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

タイトル01

ダミーテキストダミーテキストダミーテキスト

タイトル02

ダミーテキストダミーテキストダミーテキストダミーテキスト

タイトル03

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

以下の記事に追加する形で実装します。

htmlのコードは下記になります。
タブのulタグとセレクトボックスのselectタグは、どちらもdata-tab=”tab01″のカスタムデータ属性を付与し、コンテンツ全体のdivタグにid=”tab01″を付与します。

<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="select_menu_container">
	<select class="select_menu" data-tab="tab01">
		<option>タイトル01</option>
		<option>タイトル02</option>
		<option>タイトル03</option>
	</select>
</div>

<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のコードです。
セレクトボックスの装飾とタブメニューとセレクトボックスの切り替えのメディアクエリを追加します。

.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;
}
.select_menu_container {
	text-align: center;
}
.select_menu {
	padding: 10px;
	margin: 0 auto 0.8em;
	cursor: pointer;
	font-size: 125%;
	border-radius: 0;
	outline: none;
}
.tab_panel {
	overflow: hidden;
	height: 0;
	opacity: 0;
}
.tab_panel.is-show {
	overflow: visible;
	height: auto;
	opacity: 1;
	transition: opacity .4s ease-in-out;
}
@media screen and (min-width: 641px) {
	.select_menu_container {
		display: none;
	}
}
@media screen and (max-width: 640px) {
	.tab_menu {
		display: none;
	}
}

最後にjQueryのコードです。
セレクトボックス選択時に何番目のoptionタグが選択されているかを取得するには、propメソッドの引数に’selectedIndex’を指定します。

$(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');
	});

	$('.select_menu').on('change', function() {
		var datatab = $(this).data('tab');
		var tabpanel = $('#' + datatab);
		var index = $(this).prop('selectedIndex');

		tabpanel.children().removeClass('is-show');
		tabpanel.children().eq(index).addClass('is-show');
	});
});
タイトルとURLをコピーしました