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

下線スライドナビ

ホバーすると下線が左から滑らかに伸びる定番グローバルナビ。WordPressテーマのヘッダーメニューにそのまま応用できます。

hovercss

プレビュー

ソースコード

HTML

<nav class="d03-01-01-nav">
          <a href="#" onclick="return false">ホーム</a>
          <a href="#" onclick="return false">サービス</a>
          <a href="#" onclick="return false">実績</a>
          <a href="#" onclick="return false">会社概要</a>
          <a href="#" onclick="return false">お問い合わせ</a>
        </nav>

CSS

.d03-01-01-nav{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
        .d03-01-01-nav a{
          position:relative;
          color:#1f2937;
          text-decoration:none;
          font-size:14px;
          font-weight:600;
          padding:8px 2px;
        }
        .d03-01-01-nav a::after{
          content:"";
          position:absolute;
          left:0;bottom:0;
          width:100%;height:2px;
          background:#2563eb;
          transform:scaleX(0);
          transform-origin:left center;
          transition:transform .35s cubic-bezier(.4,0,.2,1);
        }
        .d03-01-01-nav a:hover::after{transform:scaleX(1)}
        .d03-01-01-nav a:hover{color:#2563eb}

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