パーツ番号 03-13-05 ・ CSSのみ

選択中アイコンのみ強調ナビ

非選択のアイコンは淡いグレーに沈め、選択中のアイコンだけ濃い色と背景で強調した静止ナビです。ECサイトの現在地表示にわかりやすく使えます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-13-05-nav">
          <a href="#" onclick="return false" aria-label="ホーム">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12l8-8 8 8M6 10v10h12V10"/></svg>
          </a>
          <a href="#" onclick="return false" class="active" aria-label="ショップ">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 8l1-4h14l1 4"/><path d="M4 8h16v11H4z"/><path d="M9 12a3 3 0 006 0"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="カート">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/><path d="M3 4h2l2.4 11h9.2L19 8H6"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="マイページ">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg>
          </a>
        </nav>

CSS

.d03-13-05-nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
        .d03-13-05-nav a{
          display:flex;align-items:center;justify-content:center;
          width:42px;height:42px;border-radius:12px;
          color:#cbd5e1;text-decoration:none;
        }
        .d03-13-05-nav a.active{
          background:#ecfdf5;color:#059669;
        }

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