【css】ナビゲーションのホバーエフェクト5選！

今回は、ナビゲーションによく使われているホバーエフェクトをご紹介したいと思います。
実際にサイトで使用されているのを拝見したエフェクトを5つピックアップしてみました！
どれもCSSのみで実装可能です。

目次

1. 【共通】ナビゲーションのスタイル

今回実装しているナビゲーションのhtmlとcssは以下の通りです。どのパターンも共通のスタイルを使用しています。

html
  1. <nav class="header-nav">
  2.   <ul>
  3.     <li><a href="">ABOUT</a></li>
  4.     <li><a href="">SERVICE</a></li>
  5.     <li><a href="">NEWS</a></li>
  6.     <li><a href="">CONTACT</a></li>
  7.   </ul>
  8. </nav>
css
  1. /*reset*/
  2. ul {
  3.   list-style: none;
  4.   margin: 0;
  5.   padding: 0;
  6. }
  7. a {
  8.   color: #000;
  9.   text-decoration: none;
  10. }
  11. /*ナビゲーションのスタイル*/
  12. .header-nav {
  13.   margin: 50px 5% 0;
  14. }
  15. .header-nav ul {
  16.   display:-webkit-box;
  17.   display:-ms-flexbox;
  18.   display: flex;
  19.   -webkit-box-pack: justify;
  20.     -ms-flex-pack: justify;
  21.   justify-content: space-between;
  22. }
  23. .header-nav ul li {
  24.     font-size: 14px;
  25. }

2. テキストの上にマークを表示

完成形デモ

See the Pen navigation-hover テキストの上にマークを表示 by crnote (@crnote) on CodePen.

CSS

ホバーエフェクト

マークのスタイルはナビゲーションのaタグに疑似要素「after」を付けて実装します。スタイルなどはお好みで変更してください。
「opacity: 0;」で不透明度を0にすることで非表示にしておきます。
ホバー時に「opacity: 1;」にすることでマークが表示されます。

  1. .header-nav ul li a {
  2.   position: relative;
  3. }
  4. /*ホバーエフェクト*/
  5. .header-nav ul li a::after {
  6.   /*マークのスタイル*/
  7.   position: absolute;
  8.   content: "";
  9.   display: block;
  10.   width: 10px;
  11.   height: 10px;
  12.   background-color: #046DFF;
  13.   border-radius: 50%;
  14.   top: -15px;
  15.   left: calc(50% - 5px);
  16.   /*不透明度0で非表示*/
  17.   opacity: 0;
  18.   /*アニメーションの速度設定*/
  19.   -webkit-transition: all 0.6s ease;
  20.   transition: all 0.6s ease;
  21. }
  22. .header-nav ul li a:hover::after {
  23.   /*不透明度1で表示*/
  24.   opacity: 1;
  25. }

3. テキストの下にマークをフワッと表示

完成形デモ

See the Pen navigation-hover テキストの下にマークをフワッと表示 by crnote (@crnote) on CodePen.

CSS

ホバーエフェクト

上記の「2.テキストの上にマークを表示」と基本的には同じです。
マークの位置を「bottom: -15px;」でテキストの下に設定しておきます。

今回はフワッと表示させるために「transform: translateY(50%);」を設定し、マークを50%下方向へ移動させておきます。
ホバー時に「transform: translateY(0);」で0の位置に移動させることでフワッと表示させることが出来ます。

  1. .header-nav ul li a {
  2.   position: relative;
  3. }
  4. /*ホバーエフェクト*/
  5. .header-nav ul li a::after {
  6.   /*マークのスタイル*/
  7.   position: absolute;
  8.   content: "";
  9.   display: block;
  10.   width: 10px;
  11.   height: 10px;
  12.   background-color: #FBDA32;
  13.   border-radius: 50%;
  14.   bottom: -15px;
  15.   left: calc(50% - 5px);
  16.   /*不透明度0で非表示*/
  17.   opacity: 0;
  18.   /*下方向へ50%移動*/
  19.   -webkit-transform: translateY(50%);
  20.   transform: translateY(50%);
  21.   /*アニメーションの速度設定*/
  22.   -webkit-transition: all 0.6s ease;
  23.   transition: all 0.6s ease;
  24. }
  25. .header-nav ul li a:hover::after {
  26.   /*不透明度1で表示*/
  27.   opacity: 1;
  28.   /*0位置に移動*/
  29.   -webkit-transform: translateY(0);
  30.   transform: translateY(0);
  31. }

4. アンダーラインを左から右へ

完成形デモ

See the Pen navigation-hover アンダーラインを左から右へ by crnote (@crnote) on CodePen.

CSS

アンダーラインのスタイルはナビゲーションのaタグに疑似要素「after」を付けて実装します。スタイルなどはお好みで変更してください。
アンダーラインの「width: 0;」で非表示にしておきます。
ホバー時に「width: 100%;」にすることで左から右へアンダーラインが表示されます。

  1. .header-nav ul li a {
  2.   position: relative;
  3. }
  4. /*ホバーエフェクト*/
  5. .header-nav ul li a::after {
  6.   /*アンダーラインのスタイル*/
  7.   position: absolute;
  8.   content: "";
  9.   display: block;
  10.   height: 3px;
  11.   background-color: #E42C31;
  12.   bottom: -15px;
  13.   left: 0;
  14.   /*幅を0に設定*/
  15.   width: 0;
  16.   /*アニメーションの速度設定*/
  17.   -webkit-transition: all 0.5s ease;
  18.   transition: all 0.5s ease;
  19. }
  20. .header-nav ul li a:hover::after {
  21.   /*幅を100%に設定*/
  22.   width: 100%;
  23. }

5. アンダーラインを中央から左右へ

完成形デモ

See the Pen navigation-hover アンダーラインを中央から左右へ by crnote (@crnote) on CodePen.

CSS

上記の「4.アンダーラインを左から右へ」と同じく、アンダーラインのスタイルをナビゲーションのaタグに疑似要素「after」を付けて実装します。

アンダーラインを中央から左右へ表示させるために、「transform: scale(0, 1);」で非表示にします。
「transform: scale();」は要素を拡大表示、縮小表示する時に使用します。

記述の仕方は、

transform: scale(数値, 数値)

となります。
1つ目の数値はX方向、2つ目の数値はY方向の比率を入力します。
今回は横方向への拡大なので、1つ目の数値を0にします。

また、「 transform-origin: center top; 」でアニメーションの基点を中央に設定しておきます。

ホバー時に「transform: scale(1, 1);」にすることでアンダーラインが中央から左右へ拡大して表示されます。

  1. .header-nav ul li a {
  2.   position: relative;
  3. }
  4. /*ホバーエフェクト*/
  5. .header-nav ul li a::after {
  6.   /*アンダーラインのスタイル*/
  7.   position: absolute;
  8.   content: "";
  9.   display: block;
  10.   width: 100%;
  11.   height: 3px;
  12.   background-color: #0DC600;
  13.   bottom: -15px;
  14.   left: 0;
  15.   /*横方向0で非表示にする*/
  16.   -webkit-transform: scale(0, 1);
  17.   transform: scale(0, 1);
  18.   /*中央を基点にアニメーション*/
  19.   -webkit-transform-origin: center top;
  20.   transform-origin: center top;
  21.   /*アニメーションの速度設定*/
  22.   -webkit-transition: all 0.5s ease;
  23.   transition: all 0.5s ease;
  24. }
  25. .header-nav ul li a:hover::after {
  26.   /*横方向等倍まで拡大*/
  27.   transform: scale(1, 1);
  28. }

6. テキストを拡大して表示

完成形デモ

See the Pen navigation-hover テキストを大きく表示 by crnote (@crnote) on CodePen.

CSS

最後に、ホバー時にテキストを拡大して表示させる方法のご紹介です。
こちらのcssはシンプルで、ホバー時にテキストに「transform: scale(1.25);」を設定することで、1.25倍拡大されます。
アニメーションの設定を変更することで、動き方の印象が変化しそうです。

  1. .header-nav ul li {
  2.   font-size: 14px;
  3.   /*アニメーションの速度設定*/
  4.   -webkit-transition: all 0.5s ease-out;
  5.   transition: all 0.5s ease-out;
  6. }
  7. /*ホバーエフェクト*/
  8. .header-nav ul li:hover {
  9.   /*1.25倍に拡大*/
  10.   -webkit-transform: scale(1.25);
  11.   transform: scale(1.25);
  12. }

まとめ

以上、cssのみで実装できるナビゲーションのホバーエフェクトを5つご紹介いたしました。
ナビゲーションのホバーエフェクトは必須だと思うので、いろいろなアイデアを持っておくと良いと思います。
また、アニメーションの設定にこだわると、より表現の幅が広がると感じました。

PAGE TOP