レスポンシブのタブメニューでSP表示の場合はセレクトボックスにします。タブメニュー、セレクトボックス、どちらも同一のコンテンツを表示します。
タイトル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');
});
});