パーツ番号 03-12-03 ・ CSSのみ
リンク一覧+おすすめ商品ECメガメニュー
左にカテゴリリンク、右におすすめ商品カードを配置したECサイト向けメガメニューです。WordPress + WooCommerceのセール訴求ナビに応用できます。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。