【CSS】ホバー時にアンダーラインが現れるアニメーションのまとめ

ヘッダーメニューをホバーするとアンダーラインが表示される HTML&CSS
スポンサーリンク

 

ヘッダーメニューをホバーすると、アンダーラインが下から現れたり、左から伸びて現れたりするアニメーションを実装してみたい。
ホームページのヘッダーメニューをオシャレにしたい。

そのような方に向けた記事でございます。
 

 

本記事の内容

  • ヘッダーのグローバルメニューとアンダーラインの準備
  • ホバーするとアンダーラインが現れるアニメーション
  • ホバーするとアンダーラインが左右に伸びるアニメーション

 
大学生向け就活対策コース有り。DMMのプログラミングスクール、無料体験、無料相談会実施中です。

スポンサーリンク

ヘッダーのグローバルメニューとアンダーラインの準備

アニメーションを実装する前に、ヘッダーのグローバルメニューとアンダーラインを準備します。

ヘッダーのグローバルメニューの作り方は、別記事で紹介していますので、詳しいコードはそちらを参考にしてください。

【コピペOK】ヘッダーのグローバルメニューのデザイン【CSSおまけ有】
HTMLとCSSを用いた、簡単なヘッダーとそのグローバルメニューの作り方を解説します。コピペしていろんなデザインにアレンジしてみてはいかがでしょうか。おまけは、メニューをホバーした時にアンダーラインが現れるアニメーションのコードです。

 

 

アンダーラインのcss

擬似要素でアンダーラインを記述します。

a {
position: relative; /*アンダーラインの位置を決めるための基準 */
}

a::after {
position: absolute; /*親要素であるaタグを基準に位置を指定*/
left: 0;            /*アンダーラインを各メニュー(aタグ)の左端に指定*/
content: '';        /*本来は、擬似要素に入るテキストなどを’’内に指定。今回はアンダーラインなので何も記載しない*/
width: 100%;        /*アンダーラインを各aタグの幅に合わせる*/
height: 2px;        /*アンダーラインの高さ(太さ)*/
background: #000000;/*アンダーラインの色*/
}

 

position: relative;で、各ヘッダーメニューのaタグを基準とし、left: 0;にアンダーラインが位置します。

この状態では、見本のようにアンダーラインがヘッダーの上端にあります。

 

 

このコードに追記していく形で、8つのアニメーションを解説していきます。
 

 

スポンサーリンク

ホバーするとアンダーラインが現れるアニメーション

  • その①:表示のみ
  • その②:上からフェードイン
  • その③:下からフェードイン

 

その①:表示のみ

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;       /*アンダーラインが位置する、各リストの下端からの高さ ヘッダーの下端に合わせています*/
visibility: hidden; /*ホバー前に、アンダーラインを可視化しない*/
}

a:hover::after {
visibility: visible; /*ホバー後、アンダーラインを可視化する*/
}

 

ちなみに、下記を追記すると、アンダーラインが徐々に現れます。

a::after {
opacity: 0;
}

a:hover::after {
opacity: 1;       /*アンダーラインが透明な状態からアニメーションが開始され、ホバーを話して終了する際も、徐々に透明な状態に戻る。*/
transition: 0.3s; /*変形の時間*/
}

 

余談ですが、visibilityの値をhiddenにした場合の注意点を説明します。

値をhiddenにするとその要素がアクセシビリティーツリー削除されます。

今回は問題ないですが、contentにテキストを入れた場合、読み上げ技術でアナウンスされなくなります。

 

 

その②:上からフェードイン

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: 20px; /*アンダーラインが現れ始める位置(aタグの下辺からの高さ)*/
opacity: 0;
visibility: hidden;
transition: 0.3s;
}

a:hover::after {
visibility: visible;
bottom: 12px; /*アニメーションが止まる位置*/
opacity: 1;
}

 

ヘッダー下端から20pxの位置を開始点とし、12pxの位置までの5pxを、アンダーラインが降りてきます。
 

 

その③:下からフェードイン

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: 4px; /*アンダーラインが現れ始める位置(aタグの下辺からの高さ)*/
opacity: 0;
visibility: hidden;
transition: 0.3s;
}

a:hover::after {
visibility: visible;
bottom: 12px;
opacity: 1;
}

 

「その②:上からフェードイン」のアニメーション開始位置を変更することで、下からフェードインするアニメーションを実装できます。
今回の場合、bottom: 4px;にすることで、ヘッダー下端4pxのところからアンダーラインが現れます。
上からフェードインでは、20px-12px=8pxの移動だったので、同じ距離(12px-4px=8px)を置いています。
 

 

スポンサーリンク

ホバーするとアンダーラインが左右に伸長するアニメーション

  • その①:左からアンダーラインがフェードイン
  • その②:右からアンダーラインがフェードイン
  • その③:左からフェードインし、右へフェードアウト
  • その④:左からフェードインし、右へフェードアウト
  • その⑤:真ん中からアンダーラインがフェードイン

 

短期集中で最短3ヶ月でITエンジニアへ転職を目指す(転職保証付き)DMMのエンジニア転職特化のプログラミングスクールです。無料カウンセリングも受付中です。

その①:左からアンダーラインがフェードイン

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形(アンダーラインの伸長)の原点がaタグ(各メニュー)の左端*/
transition: transform 0.3s; /*変形の時間*/
}

a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1(相対値)伸長*/
}

 

アンダーバーの高さが2pxであるため、Bottom: -1px;とすることで、アンダーラインの真ん中(高さ1px)の位置にヘッダーの下端が重なるようにしています。
transform-origin: left top;とすることで、左に戻るができます。

その②:右からアンダーラインがフェードイン

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: right top; /*変形(アンダーラインの伸長)の原点がaタグ(各メニュー)の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

a:hover::after {
transform: scale(1, 1); /*ホバー後、x軸方向に1(相対値)伸長*/
}

 

「その①:左からアンダーラインがフェードイン」transform-origin: left top; を transform-origin: right top;に変更すると、右からフェードインするアンダーライン になります。
 

 

その③:左からフェードインし、右へフェードアウト

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: right top; /*変形(アンダーラインの伸長)の原点がaタグ(各メニュー)の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1(相対値)伸長*/
transform-origin: left top; /*左から右に向かう*/
}

 

transform-origin: right topとすることで、ホバーを外すと右にフェードアウトします。

 

 

その④:右からフェードインし、左へフェードアウト

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: left top; /*変形(アンダーラインの伸長)の原点がaタグ(各メニュー)の左端*/
transition: transform 0.3s; /*変形の時間*/
}

a:hover::after {
transform: scale(1, 1);      /*ホバー後、x軸方向に1(相対値)伸長*/
transform-origin: right top; /*右から左に向かう*/
}

 

transform-origin: left topとすることで、ホバーを外すと左にフェードアウトします。
 

 

その⑤:真ん中からアンダーラインがフェードイン

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: center top; /*変形(アンダーラインの伸長)の原点がaタグ(各メニュー)の右端*/
transition: transform 0.3s;   /*変形の時間*/
}

a:hover::after {
transform: scale(1, 1); /*ホバー後、x軸方向に1(相対値)伸長*/
}

 

transform-origin: center topとすることで、真ん中を原点として伸長します。

 

 

本記事では、分かりやすいようにクラスを設けず、セレクタのみを対象に記述していきました。

Webページによっては、アンダーラインを実装しない箇所にもaタグがあると思うので、適宜クラスを設けていただけるといいです。
 

 

とはいえ、どのようなヘッダーの形であり、メニューのaタグをセレクタとしてデザインを記述します。

時間を変えたり、アンダーラインの位置を変えるなど、ご自身が作りたいページに合わせてカスタマイズしてみてください。
 

 

タイトルとURLをコピーしました