jQueryで滑らかにコンテンツを切り替えるタブメニューを作成する

今回はjQueryを使って滑らかにコンテンツを切り替える動的なタブメニューを作成してみます。

下記のデモが今回作成するものになります。

DEMO

まずはHTMLです。

<div class="tab">
  <ul id="tab_menu">
    <li class="show">menu1</li>
    <li>menu2</li>
    <li>menu3</li>
  </ul>
  <div id="border">
    <div></div>
  </div>
  <ul id="tab_content">
    <li class="show">
      <h2>content1</h2>
      <p>content1の内容が入ります</p>
    </li>
    <li>
      <h2>content2</h2>
      <p>content2の内容が入ります</p>
    </li>
    <li>
      <h2>content3</h2>
      <p>content3の内容が入ります</p>
    </li>
  </ul>
</div>

次にCSS

/* メニュー */
.tab{
    margin:0 auto;
    padding: 10px;
}

#tab_menu{
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 1px solid #ccc;
    overflow: hidden;
}

#tab_menu li{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
    border-right: 1px solid #ccc;
}

#tab_menu li:last-child{
    border-right: 0;
}


#tab_menu li.show{
    background-color:#f1f1f1;
}

/* メニューの下線 */
#border div{
    left: 0%;
    width: 33.3333%;
    bottom: 0;
    display: block;
    background-color: #888;
    height: 2px;
    position: relative;
    transition: left 1s cubic-bezier(0.23,1,0.32,1);
}

/* コンテンツ */
#tab_content{
    list-style-type:none;
    position: relative;
    height: auto;
    padding: 0;
}

#tab_content li {
    text-align: center;
    position: absolute;
    width: 100%;
    border: 1px solid #ccc;
    top: 100px;
    opacity: 0;
    z-index: 0;
    transition-duration: 0.8s;
}

#tab_content li.show{
    top: 0;
    opacity: 1;
    z-index: 10;
    transition-duration: 0.8s;
}

ここでのポイントは、z-indexで内容となるコンテンツの要素を重ねて同じ位置に設定し、showクラスを持たないコンテンツはcssのopacity:0で透明にします。

また、ページを訪問した際にデフォルトでmenu1とcontent1を表示するように設定しています。

そしてjQueryです。

$(function(){
    var menulist = $("#tab_menu li");
    var contentlist = $("#tab_content li");
    var border = $("#border div");

    menulist.on("click",function(){
        var selected = menulist.index($(this));
        menulist.removeClass("show").eq(selected).addClass("show");
        contentlist.removeClass("show").eq(selected).addClass("show");
        if(selected === 0){
            border.css("left","0%");
        }else if(selected === 1){
            border.css("left","33.3%");
        }else if(selected === 2){
            border.css("left","66.6%");
        }else{
            console.log(error);
        }
    });
});

クリックした要素のインデックス番号を取得し、それを条件にaddClassとremoveClassでshowクラスの追加と削除を切り替えています。

menuの下線の動作はindex番号を条件にleftプロパティの値を選択したメニューに沿うようにアニメーションさせています。

ここではメニューの項目を3つに限定してleftの値を切り替えています。

メニューの項目を増やしたい場合等はleftの値を変更して、増えた分のインデックス番号の条件を追加するだけです。

まとめ

タブメニューはブラウザの幅が制限されるため多くのメニューを設置すると逆に見づらい印象を与えますが、視覚的にメニューの項目がわかりやすく、UIに優れています。

タブメニューはメニューの項目が少ないサイトやページには非常に向いていますので、是非活用してみてください。

他にもこんな記事があります。

jQueryでスクロールするアニメーション

jQueryとAPIを活用してLightbox付きのインスタグラムギャラリーを自動更新でWebサイトに反映する

jQueryを使わずにJavaScriptだけでDOM操作