パーツ番号 03-12-04 ・ CSSのみ
アイコン付き2カラムメガメニュー
各項目にアイコンを添えた2カラム構成のメガメニューです。SaaS系WordPressサイトの「機能」メニューを開いた状態の見本として使えます。
プレビュー
ソースコード
HTML
<div class="d03-12-04-stage">
<div class="d03-12-04-bar">
<span class="d03-12-04-logo">LOGO</span>
<nav class="d03-12-04-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-04-panel">
<div class="d03-12-04-cell">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
<span>ダッシュボード</span>
</div>
<div class="d03-12-04-cell">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19V9M12 19V5M20 19v-7"/></svg>
<span>分析レポート</span>
</div>
<div class="d03-12-04-cell">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg>
<span>スケジュール</span>
</div>
<div class="d03-12-04-cell">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/><circle cx="12" cy="8" r="4"/></svg>
<span>チーム管理</span>
</div>
<div class="d03-12-04-cell">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9h18"/></svg>
<span>請求管理</span>
</div>
<div class="d03-12-04-cell">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3 6 6 1-4.5 4.5L18 20l-6-3-6 3 1.5-6.5L3 9l6-1z"/></svg>
<span>連携アプリ</span>
</div>
</div>
</div>CSS
.prev.d03-12-04{padding:0;display:block}
.d03-12-04-stage{width:100%;height:100%;min-height:260px;background:#fff;display:flex;flex-direction:column}
.d03-12-04-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-04-logo{font-weight:800;font-size:13px;color:#111827;letter-spacing:.06em}
.d03-12-04-nav{display:flex;gap:16px}
.d03-12-04-nav a{color:#475569;text-decoration:none;font-size:11px;font-weight:600}
.d03-12-04-nav a.active{color:#4f46e5}
.d03-12-04-panel{
flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;
gap:1px;background:#e0e7ff;padding:1px;
}
.d03-12-04-cell{
background:#fff;display:flex;align-items:center;gap:10px;padding:0 16px;
}
.d03-12-04-cell svg{color:#4f46e5;flex:none}
.d03-12-04-cell span{font-size:11px;color:#334155;font-weight:600}クラス名 .d03-12-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。