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

フルスクリーンオーバーレイ型ナビ(静止見本)

画面全体を覆うオーバーレイ状態を固定表示したフルスクリーンナビゲーションです。WordPressのハンバーガーメニューを開いた瞬間のデザイン検討に役立ちます。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-12-06-stage">
          <span class="d03-12-06-close">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </span>
          <span class="d03-12-06-sub">MENU</span>
          <nav class="d03-12-06-nav">
            <a href="#" onclick="return false" class="active">ホーム</a>
            <a href="#" onclick="return false">サービス</a>
            <a href="#" onclick="return false">実績</a>
            <a href="#" onclick="return false">お問い合わせ</a>
          </nav>
        </div>

CSS

.prev.d03-12-06{padding:0;display:block}
        .d03-12-06-stage{
          position:relative;width:100%;height:100%;min-height:260px;background:#0f172a;
          display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
        }
        .d03-12-06-close{position:absolute;top:14px;right:16px;color:#94a3b8;line-height:0}
        .d03-12-06-sub{font-size:10px;color:#64748b;letter-spacing:.3em;text-transform:uppercase}
        .d03-12-06-nav{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d03-12-06-nav a{color:#f8fafc;text-decoration:none;font-size:16px;font-weight:700;letter-spacing:.03em}
        .d03-12-06-nav a.active{color:#38bdf8}

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