メニューアイテムにマウスを重ねたときに下線を表示するエフェクトを4種類作成したので、書き留めておきます。
スポンサーリンク
1.左から右へ下線を引く
li a:afterでwidth:0として、li a:hover:afterでwidth:100%にして左から右に下線が伸びているようにしています。HTML
<div class="nav1">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
.nav1 ul {
font-size: 0;
box-sizing: border-box;
width: 100%;
padding: 4px;
list-style: none;
text-align: center;
}
.nav1 li {
font-size: 24px;
margin: 0 8px;
display: inline-block;
}
.nav1 li a {
text-decoration: none;
padding-bottom: 3px; /* 文字と下線に隙間を作る */
color: #000;
display: block;
}
.nav1 li a:after {
content: '';
width: 0;
transition: all 0.3s ease;
border-bottom: 3px solid #000;
display: block;
}
.nav1 li a:hover:after {
width: 100%;
border-bottom: 3px solid #000;
}
2.右から左に下線を引く
li a:afterでwidth:0とし、開始位置を右にするためright:0とします、li a:hover:afterでwidth:100%にして右から左に下線が伸びているようにしています。HTML
<div class="nav2">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
.nav2 ul {
font-size: 0;
box-sizing: border-box;
width: 100%;
padding: 4px;
list-style: none;
text-align: center;
}
.nav2 li {
font-size: 24px;
margin: 0 8px;
display: inline-block;
}
.nav2 li a {
text-decoration: none;
padding-bottom: 3px;
color: #000;
display: block;
position: relative;
}
.nav2 li a:after {
content: '';
position: absolute;
width: 0;
right: 0;
bottom: 0;
transition: all 0.3s ease;
border-bottom: 3px solid #000;
display: block;
}
.nav2 li a:hover:after {
width: 100%;
border-bottom: 3px solid #000;
}
3.中央から左右に下線を引く
beforeで左側、afterで右側の下線を描きます。li a:before、li a:afterで、それぞれ開始点を中央のところにしています。HTML
<div class="nav3">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
.nav3 ul {
font-size: 0;
box-sizing: border-box;
width: 100%;
padding: 4px;
list-style: none;
text-align: center;
}
.nav3 li {
font-size: 24px;
margin: 0 8px;
display: inline-block;
}
.nav3 li a {
text-decoration: none;
padding-bottom: 3px;
color: #000;
display: block;
position: relative;
}
.nav3 li a:before {
content: '';
width: 0;
left: 50%;
bottom: 0;
transition: all 0.3s ease;
border-bottom: 3px solid #000;
position: absolute;
display: block;
}
.nav3 li a:hover:before {
width: 50%;
border-bottom: 3px solid #000;
}
.nav3 li a:after {
content: '';
width: 0;
right: 50%;
bottom: 0;
transition: all 0.3s ease;
border-bottom: 3px solid #000;
position: absolute;
display: block;
}
.nav3 li a:hover:after {
width: 50%;
border-bottom: 3px solid #000;
}
4.左右から中央へ向かって下線を引く
beforeで左側、afterで右側の下線を描きます。li a:before、li a:afterで、それぞれ開始点をleft:0、right:0としています。HTML
<div class="nav4">
<ul>
<li><a href="#">TEST 01</a></li>
<li><a href="#">TEST 02</a></li>
<li><a href="#">TEST 03</a></li>
<li><a href="#">TEST 04</a></li>
<li><a href="#">TEST 05</a></li>
</ul>
</div>
CSS
.nav4 ul {
font-size: 0;
box-sizing: border-box;
width: 100%;
padding: 4px;
list-style: none;
text-align: center;
}
.nav4 li {
font-size: 24px;
margin: 0 8px;
display: inline-block;
}
.nav4 li a {
text-decoration: none;
padding-bottom: 3px;
color: #000;
display: block;
position: relative;
}
.nav4 li a:before {
content: '';
width: 0;
left: 0;
bottom: 0;
transition: all 0.3s ease;
border-bottom: 3px solid #000;
position: absolute;
display: block;
}
.nav4 li a:hover:before {
width: 50%;
border-bottom: 3px solid #000;
}
.nav4 li a:after {
content: '';
width: 0;
right: 0;
bottom: 0;
transition: all 0.3s ease;
border-bottom: 3px solid #000;
position: absolute;
display: block;
}
.nav4 li a:hover:after {
width: 50%;
border-bottom: 3px solid #000;
}
突然のコメント失礼いたします。
以前から、こちらの記事を参考にさせていただき、マウスオーバーで左右から下線がひかれるように実装が行えて、クライアントワークで大変助かっております。
一点ご質問させてください。
こちらの記事のサンプルを拝見した際にもそうなのですが、一度カーソルを合わせた後に、カーソルをはずすと、ボタンによって、ほんの小さくドットのようなものが残ってしまう現象が生じます。例えば、こちらの記事の「1.左から右へ下線を引く」サンプルですと、TEST04にカーソルを合わせた後に、下方向にカーソルをはずすと、ドットが残ります。そのあと、他のボタンにカーソルを合わせると自然に消えます。
ちなみにわたしの環境はWindows10 GoogleChromeです。
これまでクライアントから指摘を受けたことはないのですが、できれば改善できればと以前から思っておりました。もし解決策や原因がお分かりになれば教えてくだされば幸いです。
最後になりますが、このような記事を掲載していただき、本当に助かっております。ありがとうございます。
ユウ様、ご指摘ありがとうございます。
こちらでも確認したところ、Windows 10で同じ現象が発生しました。Macでは大丈夫でしたのでちょっと厄介ですね。
時間がかかるかもしれませんが、調べてみますのでお待ちください。
transitionの設定値が悪さをしているのがわかりましたが、なぜ残像が残るのかはわかりませんでした。タイミングによるのかなと思いますが。
対策としては、transitionの「ease」を「ease-out」に変更してください。
この変更により私のほうは残像が消えました。アニメーションの時間が短いので動作に関しては気にならないかなと思います。
それでも残像が残る場合は、時間を短くしてみてください。今は0.3秒にしていますが、0.2秒にしてみるとか。
早速ご対応いただき、本当にありがとうございます。
ご教授いただきました方法を早速試してみたのですが、残念ながらわたしの環境では改善されませんでした。
ただ、ネットを探していたところ、少し現象が違うのですが、残像に関する解決策として、以下のコードが紹介されており、試してみたところ、無事残像が表示されなくなりました。
::beforeと::afterに以下を追加
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
なぜ解決されたのか、そもそもこれが解決なのかは、よくわかっていないのですが、ご報告させていただきます。
ご報告、ありがとうございます。
上手くいかなかったですか、難しいですね。
でも別の手段があり、残像がなくなり良かったです。
お忙しいなか、ご対応いただきありがとうございました。
これからもよろしくお願いいたします。