パーツ番号 03-04-05 ・ JavaScript使用

2言語切替トグル

JA/ENの2択をトグルスイッチのつまみをスライドさせて切り替えます。シンプルな2言語運用のWordPressサイトのヘッダー言語切替に最適です。

i18njs

プレビュー

ソースコード

HTML

<div class="d03-04-05-toggle" role="button" tabindex="0">
          <span class="d03-04-05-label d03-04-05-ja">JA</span>
          <span class="d03-04-05-knob"></span>
          <span class="d03-04-05-label d03-04-05-en">EN</span>
        </div>

CSS

.d03-04-05-toggle{position:relative;display:flex;align-items:center;gap:10px;
          width:104px;height:38px;background:#e5e7eb;border-radius:19px;padding:0 10px;cursor:pointer;user-select:none}
        .d03-04-05-label{font-size:12px;font-weight:800;color:#9ca3af;z-index:1;transition:color .2s}
        .d03-04-05-toggle.is-en .d03-04-05-en,.d03-04-05-toggle:not(.is-en) .d03-04-05-ja{color:#1f2937}
        .d03-04-05-knob{position:absolute;top:3px;left:3px;width:32px;height:32px;border-radius:50%;
          background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s ease}
        .d03-04-05-toggle.is-en .d03-04-05-knob{transform:translateX(60px)}

JavaScript

(function(){
        var t=document.querySelector('#item-03-04-05 .d03-04-05-toggle');
        function flip(){t.classList.toggle('is-en');}
        t.addEventListener('click',flip);
        t.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();flip();}});
      })();

クラス名 .d03-04-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。