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

パーツ番号 03-14-01 ・ CSSのみ

ホバーで下層プルダウン展開パンくず

パンくずの階層名にホバーすると、その階層の兄弟ページ一覧がプルダウン表示されます。WordPressの深い階層構造を持つサイトで、迂回せずに横移動できる導線として使えます。

hovercss

プレビュー

ソースコード

HTML

<nav class="d03-14-01-bc" aria-label="パンくずリスト">
          <a href="#" onclick="return false">ホーム</a>
          <span class="d03-14-01-sep">›</span>
          <span class="d03-14-01-drop">
            <a href="#" onclick="return false" class="d03-14-01-trigger">サービス ▾</a>
            <span class="d03-14-01-panel">
              <a href="#" onclick="return false">Web制作</a>
              <a href="#" onclick="return false">SEO対策</a>
              <a href="#" onclick="return false">保守運用</a>
            </span>
          </span>
          <span class="d03-14-01-sep">›</span>
          <span class="d03-14-01-current">料金プラン</span>
        </nav>

CSS

.d03-14-01-bc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13px}
        .d03-14-01-bc a{color:#475569;text-decoration:none;font-weight:600}
        .d03-14-01-bc a:hover{color:#2563eb}
        .d03-14-01-sep{color:#94a3b8;font-size:12px}
        .d03-14-01-current{color:#0f172a;font-weight:700}
        .d03-14-01-drop{position:relative;display:inline-block}
        .d03-14-01-trigger{display:inline-block}
        .d03-14-01-panel{
          position:absolute;top:100%;left:50%;transform:translate(-50%,-6px);
          margin-top:8px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;
          box-shadow:0 12px 24px rgba(0,0,0,.12);padding:8px;display:flex;flex-direction:column;
          min-width:130px;opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:3;
        }
        .d03-14-01-drop:hover .d03-14-01-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
        .d03-14-01-panel a{padding:6px 10px;font-size:12px;border-radius:6px;white-space:nowrap}
        .d03-14-01-panel a:hover{background:#eff6ff}

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