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

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

3カラム構成メガメニュー(開いた状態)

「サービス」を開いた状態を固定表示した3カラムのメガメニュー見本です。WordPressのコーポレートサイトでサービス項目が多い場合のヘッダー設計の参考になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-12-01-stage">
          <div class="d03-12-01-bar">
            <span class="d03-12-01-logo">LOGO</span>
            <nav class="d03-12-01-nav">
              <a href="#" onclick="return false">ホーム</a>
              <a href="#" onclick="return false" class="active">サービス</a>
              <a href="#" onclick="return false">実績</a>
              <a href="#" onclick="return false">会社概要</a>
            </nav>
          </div>
          <div class="d03-12-01-panel">
            <div class="d03-12-01-col">
              <h4>デザイン</h4>
              <a href="#" onclick="return false">Web制作</a>
              <a href="#" onclick="return false">UI/UX設計</a>
              <a href="#" onclick="return false">ロゴ制作</a>
            </div>
            <div class="d03-12-01-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-01-col">
              <h4>マーケティング</h4>
              <a href="#" onclick="return false">SEO対策</a>
              <a href="#" onclick="return false">広告運用</a>
              <a href="#" onclick="return false">SNS運用</a>
            </div>
          </div>
        </div>

CSS

.prev.d03-12-01{padding:0;display:block}
        .d03-12-01-stage{width:100%;height:100%;min-height:260px;background:#fff;display:flex;flex-direction:column}
        .d03-12-01-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-01-logo{font-weight:800;font-size:13px;letter-spacing:.08em;color:#111827}
        .d03-12-01-nav{display:flex;gap:16px}
        .d03-12-01-nav a{color:#475569;text-decoration:none;font-size:11px;font-weight:600}
        .d03-12-01-nav a.active{color:#2563eb}
        .d03-12-01-panel{
          flex:1;display:flex;gap:14px;padding:16px;
          background:#f8fafc;border-top:2px solid #2563eb;
        }
        .d03-12-01-col{flex:1;min-width:0}
        .d03-12-01-col h4{
          margin:0 0 8px;font-size:10px;letter-spacing:.06em;color:#2563eb;
          text-transform:uppercase;border-bottom:1px solid #dbeafe;padding-bottom:6px;
        }
        .d03-12-01-col a{display:block;color:#475569;text-decoration:none;font-size:11px;padding:4px 0}

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