Posts in Category ‘Bootstrap 4’

Bootstrap 4でモバイル端末ではタブの代わりにセレクトボックスを表示させる

CSSフレームワークのBootstrap 4を使うと、タブを使って表示するコンテンツを切り替える機能を簡単に実現できます。（Bootstrap 4のJavascriptを有効にしておく必要があります。）

<!-- タブ -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

<!-- コンテンツ -->
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

ただ、レスポンシブ対応のサイトにおいて、スマートフォン等の画面の小さいデバイスでアクセスした場合、タブの数が多いとタブの行が複数行になったりして、見栄えが良くありません。

そのような場合に、タブの代わりにセレクトボックスで表示するコンテンツを選べるようにするのが、一つの対処法だと思います。

まず、既存のタブを画面が小さいデバイスでは表示させないようにするため、上のコードの<ul>タグに対して、d-noneとd-md-flexクラスを追加します。

<!-- タブ -->
<ul class="nav nav-tabs d-none d-md-flex" id="myTab" role="tablist">
...

これによって、デバイスの横幅が768px未満の場合はタブを表示させないようにすることができます。768pxという閾値については、「md」を「sp」や「lg」に変更することで変えることができます。詳しくは、Bootstrap 4の公式ページをご参照ください。

https://getbootstrap.com/docs/4.5/layout/overview/

次に、セレクトボックスのコードをタブのコードの前か後ろに追加します。

<!-- セレクトボックス -->
<select class="form-control nav-select d-md-none">
    <option value="#home">Home</option>
    <option value="#profile">Profile</option>
    <option value="#contact">Contact</option>
</select>

d-md-noneによって、768px以上のデバイスでは表示されなくなります。

最後にセレクトボックスの選択に連動して表示するコンテンツを切り替えるためのJavascript（JQueryを利用）のコードを追加します。

<script>
  $('.nav-select').on('change', function(e) {
    var id = $(this).val();
    $('a[href="' + id + '"]').tab('show');
  });
</script>

以上です。

Top