パーツ番号 03-14-02 ・ JavaScript使用

折りたたみ中間階層展開パンくず

「…」をクリックすると隠れていた中間階層が幅アニメーション付きで展開します。WordPressの階層が深いページでパンくずが横に長くなりすぎるのを防げます。

clickjsoverlay

プレビュー

ソースコード

HTML

<nav class="d03-14-02-bc" aria-label="パンくずリスト">
          <a href="#" onclick="return false">ホーム</a>
          <button type="button" class="d03-14-02-ellipsis" aria-label="中間階層を表示">…</button>
          <span class="d03-14-02-hidden">
            <span class="d03-14-02-hidden-in">
              <span class="d03-14-02-sep">›</span><a href="#" onclick="return false">サービス</a>
              <span class="d03-14-02-sep">›</span><a href="#" onclick="return false">Web制作事業部</a>
            </span>
          </span>
          <span class="d03-14-02-sep">›</span>
          <span class="d03-14-02-current">料金プラン</span>
        </nav>

CSS

.d03-14-02-bc{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;font-size:13px}
        .d03-14-02-bc a{color:#475569;text-decoration:none;font-weight:600}
        .d03-14-02-bc a:hover{color:#2563eb}
        .d03-14-02-sep{color:#94a3b8;font-size:12px}
        .d03-14-02-current{color:#0f172a;font-weight:700}
        .d03-14-02-ellipsis{
          border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;cursor:pointer;
          font-size:12px;font-weight:700;border-radius:999px;width:26px;height:22px;line-height:1;
          transition:background .2s ease,transform .3s ease;font-family:inherit;
        }
        .d03-14-02-ellipsis:hover{background:#eef2ff;color:#2563eb}
        .d03-14-02-bc.open .d03-14-02-ellipsis{transform:rotate(180deg)}
        .d03-14-02-hidden{display:grid;grid-template-columns:0fr;transition:grid-template-columns .35s ease}
        .d03-14-02-bc.open .d03-14-02-hidden{grid-template-columns:1fr}
        .d03-14-02-hidden-in{display:flex;align-items:center;gap:6px;overflow:hidden;min-width:0}

JavaScript

(function(){
        var bc=document.querySelector('.d03-14-02-bc');
        if(!bc)return;
        var btn=bc.querySelector('.d03-14-02-ellipsis');
        btn.addEventListener('click',function(){
          bc.classList.toggle('open');
        });
      })();

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