← 動的パーツギャラリーへ戻る

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

パンくずドロップダウン

パンくずの各階層をクリックすると、その階層の兄弟ページ一覧がドロップダウン表示されます。WordPressの深い階層ページでの回遊導線に便利です。

clickjsoverlay

プレビュー

ソースコード

HTML

<nav class="d03-02-11-crumb">
          <span class="d03-02-11-node">
            <button class="d03-02-11-link" type="button">ホーム</button>
          </span>
          <span class="d03-02-11-sep">/</span>
          <span class="d03-02-11-node">
            <button class="d03-02-11-link" type="button">サービス <i>▾</i></button>
            <ul class="d03-02-11-drop">
              <li>Web制作</li><li>SEO対策</li><li>保守運用</li>
            </ul>
          </span>
          <span class="d03-02-11-sep">/</span>
          <span class="d03-02-11-node d03-02-11-cur">料金プラン</span>
        </nav>

CSS

.prev.d03-02-11{align-items:flex-start}
        .d03-02-11-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;color:#64748b}
        .d03-02-11-node{position:relative}
        .d03-02-11-link{border:none;background:none;font-size:13px;color:#4f46e5;font-weight:600;cursor:pointer;padding:4px 2px;display:inline-flex;align-items:center;gap:2px}
        .d03-02-11-link i{font-size:10px;font-style:normal}
        .d03-02-11-sep{color:#cbd5e1}
        .d03-02-11-cur{color:#334155;font-weight:600}
        .d03-02-11-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:140px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 12px 28px rgba(30,41,59,.16);list-style:none;margin:0;padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:5}
        .d03-02-11-drop.open{opacity:1;visibility:visible;transform:translateY(0)}
        .d03-02-11-drop li{padding:8px 10px;border-radius:7px;font-size:12.5px;color:#374151;cursor:pointer;transition:background .15s}
        .d03-02-11-drop li:hover{background:#eef2ff;color:#4338ca}

JavaScript

(function(){
        var root=document.getElementById('item-03-02-11');if(!root)return;
        var link=root.querySelector('.d03-02-11-link'),drop=root.querySelector('.d03-02-11-drop');
        link.addEventListener('click',function(e){e.stopPropagation();drop.classList.toggle('open');});
        document.addEventListener('click',function(){drop.classList.remove('open');});
      })();

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