パーツ番号 03-02-11 ・ JavaScript使用
パンくずドロップダウン
パンくずの各階層をクリックすると、その階層の兄弟ページ一覧がドロップダウン表示されます。WordPressの深い階層ページでの回遊導線に便利です。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。