[CSS] タブ切り替えUIのスライドするインジケータを作る方法

タブ切り替えは、省スペースにコンテンツを配置できるUIで、Webサイト、ネイティブアプリ問わずに実装されている。

タブをクリック、もしくはタップすれば、対象エリアがそのタブに関連する情報に切り替わる仕組みだ。そしてクリックされたタブは、アクティブ状態のスタイルが付与される。これがフィードバックとなって、ユーザーは自身がクリックしたタブを認識できるということなのだろう。

このアクティブ状態の表現はさまざまで多種多様にある。たとえば、内包するテキストやロゴの色が濃くなったり、サイズが大きくなったりする。あるいは、タブ自体に罫線が付いたり、影が付いたりする。

さらにはアニメーションで表現するものもある。

アクティブ状態のタブの上辺か下辺にボーダーがあって、タブ切り替え時に横にスライドするといったものだ。タブの横幅が不一致である場合は、ボーダーも可変する。

このエントリーでは、タブ切り替えUIにスライドするインジケータを作る方法を紹介したい。

タブ切り替えUIをコーディングする

<ul class="u-tabbar">
  <li class="tabbar-item">カテゴリー</li>
  <li class="tabbar-item">タグ</li>
  <li class="tabbar-item">アーカイブ</li>
  <li class="tabbar-indicator"></li>
</ul>

HTML

<li class="tabbar-indicator"></li>がインジケータを担っている。タブ下辺にあるボーダーを表現するためだけのタグだ。

CSS (SCSS)

.u-tabbar {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 320px;
  .tabbar-item {
    position: relative;
    z-index: 1;
    padding: 20px;
    font-size: 12px;
    cursor: pointer;
  }
  .tabbar-indicator {
    position: absolute;
    bottom: 0;
    left: 28px;
    width: 100px;
    height: 3px;
    background-color: #333;
    transition: width 225ms ease, left 225ms ease;
    will-change: width, left;
  }
}

.tabbar-indicator {...}がインジケータのスタイルだ。ポイントはposition: absolute;で、各タブの梱包要素を基準に絶対位置に配置している。この場合は、下部だからbottom: 0;というわけだ。そしてtransition: width 225ms ease, left 225ms ease;で変化するプロパティを指定している。この場合は、widthとleftが対象になる。

JS

var TabChanger = (function () {
  
    var defaults = {
            indicator: '.tabbar-indicator',
        };
    function Plugin (element, options) {
        this.element       = element;
        this.settings      = Object.assign({}, defaults, options);
        this.defaults      = defaults;
        this.clickHandler  = this.clickHandler.bind(this);
        this.init();
    }
    Plugin.prototype = {
        init: function () {
            document.addEventListener('click', this.clickHandler);
        },
        clickHandler: function (e) {
            if (e.target.matches(this.element)) {
                var el     = e.target,
                    left   = el.offsetLeft,
                    width  = el.clientWidth,
                    layer  = document.querySelector(this.settings.indicator);
                layer.style.left = left + 'px';
                layer.style.width = width + 'px';
            }
        }
    };
    return Plugin;
})();
new TabChanger('.tabbar-item');

クリックしたタブの左辺オフセット値と横幅をインジケータ要素にスタイル付与している。CSSのtransitionでwidthとleftが対象だった。つまりクリックしたタブの左辺まで移動しながら横幅がフィットするようなアニメーションが実現する。

まとめ

タブ切り替えUIにスライドするインジケータを作る方法の紹介だった。

タブ切り替えUIにおいてはサンプルのとおり記述してもらえば再現はするが、コンテンツ部分は記述しなかった。理解の妨げになると思ってのことだけれど、もし上記ソースコードをカスタマイズするならば、JSのif (e.target.matches(this.element)) {...}内で展開すればよい。イベントデリゲートでタブクリックだったか否かを判定してくれるif文だ。タブ要素に、data属性でも記述してコンテンツ要素と結びつければタブ切り替え機能の完成だ。機会があれば挑戦してみてほしい。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。