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

パーツ番号 03-12-02 ・ CSSのみ

商品カテゴリ画像付きメガメニュー

カテゴリごとに画像サムネイルを並べた開いた状態のメガメニューです。WordPress + WooCommerceのカテゴリ一覧ナビとしてそのまま参考にできます。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-12-02-stage">
          <div class="d03-12-02-bar">
            <span class="d03-12-02-logo">SHOP</span>
            <nav class="d03-12-02-nav">
              <a href="#" onclick="return false">新着</a>
              <a href="#" onclick="return false" class="active">商品</a>
              <a href="#" onclick="return false">セール</a>
            </nav>
          </div>
          <div class="d03-12-02-panel">
            <div class="d03-12-02-card">
              <div class="d03-12-02-thumb d03-12-02-thumb-a"></div>
              <span>シューズ</span>
            </div>
            <div class="d03-12-02-card">
              <div class="d03-12-02-thumb d03-12-02-thumb-b"></div>
              <span>バッグ</span>
            </div>
            <div class="d03-12-02-card">
              <div class="d03-12-02-thumb d03-12-02-thumb-c"></div>
              <span>アクセサリー</span>
            </div>
            <div class="d03-12-02-card">
              <div class="d03-12-02-thumb d03-12-02-thumb-d"></div>
              <span>アパレル</span>
            </div>
          </div>
        </div>

CSS

.prev.d03-12-02{padding:0;display:block}
        .d03-12-02-stage{width:100%;height:100%;min-height:260px;background:#fff;display:flex;flex-direction:column}
        .d03-12-02-bar{
          display:flex;align-items:center;justify-content:space-between;
          height:42px;padding:0 16px;background:#fff;border-bottom:1px solid #e5e7eb;flex:none;
        }
        .d03-12-02-logo{font-weight:800;font-size:13px;color:#0f172a;letter-spacing:.06em}
        .d03-12-02-nav{display:flex;gap:16px}
        .d03-12-02-nav a{color:#475569;text-decoration:none;font-size:11px;font-weight:600}
        .d03-12-02-nav a.active{color:#0d9488}
        .d03-12-02-panel{
          flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
          padding:16px;background:#f0fdfa;
        }
        .d03-12-02-card{display:flex;flex-direction:column;gap:6px}
        .d03-12-02-thumb{width:100%;height:64px;border-radius:8px}
        .d03-12-02-thumb-a{background:linear-gradient(135deg,#5eead4,#0d9488)}
        .d03-12-02-thumb-b{background:linear-gradient(135deg,#7dd3fc,#0284c7)}
        .d03-12-02-thumb-c{background:linear-gradient(135deg,#fde68a,#d97706)}
        .d03-12-02-thumb-d{background:linear-gradient(135deg,#c4b5fd,#7c3aed)}
        .d03-12-02-card span{font-size:10px;color:#134e4a;font-weight:600;text-align:center}

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