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

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

特集バナー付きメガメニュー

リンク一覧の横にグラデーションの特集バナーを添えたメガメニューです。WordPressのキャンペーン訴求を兼ねたナビゲーション設計の参考になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-12-08-stage">
          <div class="d03-12-08-bar">
            <span class="d03-12-08-logo">LOGO</span>
            <nav class="d03-12-08-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-08-panel">
            <div class="d03-12-08-links">
              <div class="d03-12-08-col">
                <h4>新作</h4>
                <a href="#" onclick="return false">春夏コレクション</a>
                <a href="#" onclick="return false">限定アイテム</a>
              </div>
              <div class="d03-12-08-col">
                <h4>定番</h4>
                <a href="#" onclick="return false">ベーシック</a>
                <a href="#" onclick="return false">アウトレット</a>
              </div>
            </div>
            <div class="d03-12-08-banner">
              <strong>SPRING<br>SALE</strong>
              <span class="cta">今すぐ見る</span>
            </div>
          </div>
        </div>

CSS

.prev.d03-12-08{padding:0;display:block}
        .d03-12-08-stage{width:100%;height:100%;min-height:260px;background:#fff;display:flex;flex-direction:column}
        .d03-12-08-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-08-logo{font-weight:800;font-size:13px;color:#111827;letter-spacing:.06em}
        .d03-12-08-nav{display:flex;gap:16px}
        .d03-12-08-nav a{color:#475569;text-decoration:none;font-size:11px;font-weight:600}
        .d03-12-08-nav a.active{color:#db2777}
        .d03-12-08-panel{flex:1;display:flex;gap:14px;padding:16px;background:#fff}
        .d03-12-08-links{flex:1;display:flex;gap:14px}
        .d03-12-08-col{flex:1;min-width:0}
        .d03-12-08-col h4{
          margin:0 0 8px;font-size:10px;letter-spacing:.06em;color:#db2777;
          text-transform:uppercase;border-bottom:1px solid #fbcfe8;padding-bottom:6px;
        }
        .d03-12-08-col a{display:block;color:#475569;text-decoration:none;font-size:11px;padding:4px 0}
        .d03-12-08-banner{
          width:140px;flex:none;border-radius:10px;padding:16px;
          background:linear-gradient(135deg,#fb7185,#db2777);
          display:flex;flex-direction:column;justify-content:center;gap:10px;color:#fff;
        }
        .d03-12-08-banner strong{font-size:15px;font-weight:800;line-height:1.3}
        .d03-12-08-banner .cta{
          align-self:flex-start;font-size:9px;font-weight:700;background:#fff;
          color:#db2777;padding:4px 10px;border-radius:999px;
        }

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