パーツ番号 03-03-11 ・ CSSのみ

アンダーラインタブ型ナビ

現在地の項目だけ下に太い線を添えたタブ風の静止ナビゲーションです。WordPressの管理画面風UIやダッシュボードページのメニューに向いています。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-03-11-nav">
          <span class="d03-03-11-item d03-03-11-active">ホーム</span>
          <span class="d03-03-11-item">サービス</span>
          <span class="d03-03-11-item">実績</span>
          <span class="d03-03-11-item">会社概要</span>
        </nav>

CSS

.prev.d03-03-11{padding:0;display:block}
        .d03-03-11-nav{
          display:flex;align-items:flex-end;gap:26px;justify-content:center;
          width:100%;height:100%;min-height:260px;padding:0 22px;
          background:#fff;border-bottom:1px solid #e5e7eb;
        }
        .d03-03-11-item{position:relative;padding:0 0 16px;font-size:13px;font-weight:600;color:#64748b}
        .d03-03-11-active{color:#0f172a}
        .d03-03-11-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#2563eb;border-radius:2px}

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