【簡単】タブメニューを作ろう

2019/9/8 2019/11/29

WEBサイトを見ていると、タブメニューをよく見かけます。

タブメニューを使うと、クリックしたタブに合わせたコンテンツが表示され、それ以外のコンテンツはサッと隠れます。

選択したものだけ表示されるので、縦にずらっとコンテンツを並べるよりも場所をとらず、スマートな感じがします。

すっきりした見た目になる気がします

今日はタブメニューの作り方の一例について書きたいと思います。

1 実装
2 フワッとさせたい
3 他にも良いやり方があったら教えてね

実装

HTMLではタブ部分とコンテンツ部分をリスト形式で作っています。

また一番最初に表示されているコンテンツ部分にはshowというクラスを付けています。

<div class="main">
  <ul class="tab-menu">
    <li class="tab tab1">TAB1</li>
    <li class="tab tab2">TAB2</li>
    <li class="tab tab3">TAB3</li>
  </ul>
  <ul class="content-box">
    <li class="content content1 show">CONTENT1</li>
    <li class="content content2">CONTENT2</li>
    <li class="content content3">CONTENT3</li>
  </ul>
</div>

CSSでのポイントは最後の方にあるコンテンツの表示と非表示部分です。

初期状態では一旦全てのコンテンツをdisplay: noneにしておき、showクラスが付いたものだけを表示するようにしておきます。

これにより初期状態では一番最初のコンテンツだけが表示された状態になっています。

body {
  color: #333;
}

ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.main {
  margin: auto;
  width: 60%;
}

.tab-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.tab-menu li {
  width: 33.33%;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  font-weight: 700;
}

.tab1,
.content1 {
  background: blue;
}

.tab2,
.content2 {
  background: yellow;
}

.tab3,
.content3 {
  background: red;
}

/* 一旦コンテンツ部分は全部非表示にする */
.content {
  height: 300px;
  text-align: center;
  line-height: 300px;
  font-weight: 700;
  display: none;
}

/* .showが付いたものだけ表示する */
.content.show {
  display: block;
}

jQueryでクラスの付け外しを行います。

タブ部分とコンテンツ部分の順番は一致（1つ目のタブは1つ目のコンテンツに対応し、2つ目のタブは2つ目のコンテンツに対応というようなHTMLになっている）するので、 eqメソッドでクリックしたタブの順番を取得し、この順番をつかってタブに対応したコンテンツに.showクラスを付けて表示するようにしています。

eqメソッド参考：http://semooh.jp/jquery/api/core/eq/position/

$(function() {
  
  //いずれかのタブをクリックしたら処理が発動する
  $('.tab').click(function() {
    
  //現在.contentに付いているクラスは一旦全部取り除く
  $('.content').removeClass('show');
    
  //クリックしたタブの順番を取得
  var i = $(this).index();
    
  //タブの順番と同じコンテンツに.showを付けてコンテンツを表示する
  $('.content').eq(i).addClass('show');

  });
});

以上を実装したものが以下がデモになります。

See the Pen jONMjep by konpure (@yuntu) on CodePen.

タブの順番を取得して、対応するコンテンツを表示させるだけなので、それほど難しくないと思います。

フワッとさせたい

先ほどのタブメニューを操作してもらうとわかりますが、メニューをクリックすると即座にコンテンツが現れます。

これをややフェード気味にフワッと表示させたいということもあると思います。

フワッとさせたくない？

その場合のjQueryは先ほどの物ではなく、以下のような感じにすると良いかもしれません。

$(function() {
  
  //いずれかのタブをクリックしたら処理が発動する
  $('.tab').click(function() {
  
    //クリックしたタブの順番を取得
    var i = $(this).index();

    //一旦コンテンツを全部隠して
    $('.content').hide();
    
    //タブに対応するコンテンツだけフワッと表示させる
    $('.content').eq(i).fadeIn(1000);
    
  });
});

showというクラス付け外しでコンテンツ部分の表示非表示を切り替えるのではなく、jQueryのfadeinを利用してコンテンツの表示されるまでの時間をコントロールする方法です。

See the Pen tabmenu2 by konpure (@yuntu) on CodePen.

フワッとするアニメーションの長さを変化させたい場合はfadeInの()内の数値を変えてください（単位はミリ秒で、例えば1000なら1秒）。