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

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

リンク一覧+おすすめ商品ECメガメニュー

左にカテゴリリンク、右におすすめ商品カードを配置したECサイト向けメガメニューです。WordPress + WooCommerceのセール訴求ナビに応用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-12-03-stage">
          <div class="d03-12-03-bar">
            <span class="d03-12-03-logo">STORE</span>
            <nav class="d03-12-03-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-03-panel">
            <div class="d03-12-03-links">
              <div class="d03-12-03-col">
                <h4>カテゴリ</h4>
                <a href="#" onclick="return false">レディース</a>
                <a href="#" onclick="return false">メンズ</a>
                <a href="#" onclick="return false">キッズ</a>
              </div>
              <div class="d03-12-03-col">
                <h4>ブランド</h4>
                <a href="#" onclick="return false">A社</a>
                <a href="#" onclick="return false">B社</a>
                <a href="#" onclick="return false">C社</a>
              </div>
            </div>
            <div class="d03-12-03-feature">
              <span class="d03-12-03-badge">SALE</span>
              <div class="d03-12-03-feature-img"></div>
              <strong>限定コート</strong>
              <span class="price">¥12,800</span>
            </div>
          </div>
        </div>

CSS

.prev.d03-12-03{padding:0;display:block}
        .d03-12-03-stage{width:100%;height:100%;min-height:260px;background:#fff;display:flex;flex-direction:column}
        .d03-12-03-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-03-logo{font-weight:800;font-size:13px;color:#111827;letter-spacing:.06em}
        .d03-12-03-nav{display:flex;gap:16px}
        .d03-12-03-nav a{color:#475569;text-decoration:none;font-size:11px;font-weight:600}
        .d03-12-03-nav a.active{color:#ea580c}
        .d03-12-03-panel{flex:1;display:flex;gap:14px;padding:16px;background:#fff7ed}
        .d03-12-03-links{flex:1;display:flex;gap:14px}
        .d03-12-03-col{flex:1;min-width:0}
        .d03-12-03-col h4{
          margin:0 0 8px;font-size:10px;letter-spacing:.06em;color:#ea580c;
          text-transform:uppercase;border-bottom:1px solid #fed7aa;padding-bottom:6px;
        }
        .d03-12-03-col a{display:block;color:#78350f;text-decoration:none;font-size:11px;padding:4px 0}
        .d03-12-03-feature{
          width:120px;flex:none;background:#fff;border-radius:10px;
          box-shadow:0 2px 8px rgba(0,0,0,.08);padding:10px;
          display:flex;flex-direction:column;gap:6px;
        }
        .d03-12-03-badge{
          align-self:flex-start;background:#ea580c;color:#fff;font-size:9px;
          padding:2px 6px;border-radius:4px;font-weight:700;
        }
        .d03-12-03-feature-img{width:100%;height:56px;border-radius:6px;background:linear-gradient(135deg,#fdba74,#ea580c)}
        .d03-12-03-feature strong{font-size:11px;color:#111827}
        .d03-12-03-feature .price{font-size:11px;color:#ea580c;font-weight:700}

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