下線スライドインジケータ付きナビ
ホバーや選択中の項目に 下線がスライドして現れるナビ です。リンク文字の下に細い線がすっと伸びる演出で、コーポレートサイトや士業、ファインダイニングなど落ち着いた高級感を出したい場面に合います。 仕組みは CSS のみ で、JavaScript は使いません。
解説
ホバーや選択中の項目に下線がスライドして現れるナビです。リンク文字の下に細い線がすっと伸びる演出で、コーポレートサイトや士業、ファインダイニングなど落ち着いた高級感を出したい場面に合います。
仕組みは CSS のみで、JavaScript は使いません。各リンクの ::after 疑似要素として下線を用意し、初期状態では transform:scaleX(0) で横幅をゼロに潰しています。ホバー時や is-active 時に scaleX(1) へ戻すことで、線が左端から右へ伸びる動きになります。transform-origin:left で起点を左に固定し、cubic-bezier のイージングでゆっくり加減速させているのが上品な印象の決め手です。
使う場面とカスタマイズ
- 企業の上部メニューや、フッターのテキストリンク群
- 余白を活かしたミニマルなブランドサイトのグローバルナビ
- 下線の色
#f5576cや太さ、transitionの秒数を変えて雰囲気を調整
transform で動かしているのでレイアウトを再計算させず、描画負荷が軽いのが利点です。動きを抑えたい利用者のために prefers-reduced-motion でアニメーションを止め、選択状態は色や下線の有無だけで伝わるようにしておくと配慮が行き届きます。
使用例・適したシーン
- コーポレートサイトのグローバルナビ
- EC サイトのヘッダー
- SaaS の管理画面
- モバイル向け Web アプリ
よくある質問
下線が左から伸びるのはなぜですか
疑似要素の下線をscaleXで横方向に拡大しており、transform-originをleftに指定しているためです。起点を中央centerにすれば中から両側に開き、rightにすれば右から伸びます。向きを変えるだけで印象が変わります。
アニメーションの速さを変えられますか
はい。リンクのafter疑似要素にあるtransitionの秒数を変更します。サンプルは0.35秒で、cubic-bezierでゆっくり加減速させています。短くすると軽快に、長くすると優雅な印象になります。