質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

2回答

1050閲覧

メガドロップダウンメニューの下線のアニメーションの作り方が分かりません。

r.baagio10

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

0クリップ

投稿2018/11/04 12:05

編集2018/11/05 01:41

前提・実現したいこと

https://www.plus1-one.co.jp/

こちらのサイトのようなメガドロップダウンメニューを作っているのですが
マウスオーバーしたらアニメーションで下線が左から右にスライドすることは出来たのですが
下線が左から右に下線が消えてしまいます。
消えないようにするにはどのようなCSSを設定すればいいのでしょうか?

イメージ説明
画像の赤枠の通りに
マウスオーバーしたらアニメーションで下線が左から右にスライドすることは出来たのですが
下線が左から右に下線が消えてしまいます。
消えないようにするにはどのようなCSSを設定すればいいのでしょうか?

イメージ説明
before画像です。

イメージ説明
after画像です。
この画像の通りに実行したいです。

該当のソースコード

私が作ったコードになります。

css

1```ここに言語を入力 2/* header */ 3header { 4 background: rgba(0,0,0,0.5); 5 position: relative; 6} 7 8.header-container { 9 display: flex; 10 justify-content: space-between; 11 align-items: center; 12 padding: 10px 0; 13/* position: relative;*/ 14} 15 16.header-logo a { 17 color: chartreuse; 18 font-size: 40px; 19} 20 21/* navigation(menu) */ 22.nav { 23} 24 25.nav ul { 26 27} 28 29.nav ul li { 30 display: inline-block; 31 padding-left: 70px; 32} 33 34.nav ul li a { 35 position: relative; 36 display: block !important; 37 width: 100%; 38 padding: 16px 0px; 39 text-align: center; 40 color: white; 41} 42 43.nav ul li a::after { 44 position: absolute; 45 left: 0; 46 bottom: -10px; 47 content: ''; 48 width: 100%; 49 height: 4px; 50 background: red; 51 transform: scale(0,1); 52 transform-origin: left top; 53 transition: transform .3s; 54} 55 56.nav ul li a:hover::after { 57 transform: scale(1,1); 58 width: 100%; 59} 60 61.nav ul li .mmd-wrap { 62 63} 64 65.nav ul li .mmd_inner { 66 position: absolute; 67 top: 68px; 68 left: 0; 69 right: 0; 70 width: 100%; 71 padding: 20px 72px; 72 background: #000; 73} 74 75.nav ul li .mmd_inner { 76 display: none; 77} 78 79.nav ul li:hover .mmd_inner { 80 display: block; 81} 82 83.nav ul li:hover .mmd_inner { 84 display: flex; 85 justify-content: space-between; 86 align-items: center; 87} 88

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="keywords" content=""> 6 <meta name="description" content=""> 7 <meta name="viewport" content="width=device-width,initial-scale,viewport-fit=auto"> 8 <meta property="og:site_name" content=""> 9 <meta property="og:title" content=""> 10 <meta property="og:description" content=""> 11 <meta property="og:url" content=""> 12 <meta property="og:type" content=""> 13 <meta property="og:image" content=""> 14 <title></title> 15 <link rel="shortcut icon" href="/favicon.ico"> 16 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 17 <link rel="stylesheet" href="css/reset.css"> 18 <link rel="stylesheet" href="css/style2.css"> 19 </head> 20 <body> 21 <div id="wrapper"> 22 23 <!--//// header ////--> 24 <header> 25 <div class="header-container"> 26 <div class="header-logo"> 27 <h1 class="logo"><a href="">LOGO</a></h1> 28 </div> 29 <div class="nav-toggle"> 30 <div> 31 <span></span> 32 <span></span> 33 <span></span> 34 </div> 35 </div> 36 <nav class="nav"> 37 <ul class="globalnav"> 38 <li><a href="">MENU1</a></li> 39 <li><a href="">MENU2</a> 40 <div class="mmd_wrap"> 41 <div class="mmd_inner"> 42 <div class="image"> 43 <img src="img/gm_corporate.jpg" alt=""> 44 </div> 45 <ul> 46 <li><a href="">top1</a></li> 47 <li><a href="">top2</a></li> 48 <li><a href="">top3</a></li> 49 </ul> 50 </div> 51 </div> 52 </li> 53 <li><a href="">MENU3</a></li> 54 <li><a href="">MENU4</a></li> 55 <li><a href="">MENU5</a></li> 56 </ul> 57 </nav> 58 </div> 59 </header> 60 </div> 61 </body> 62</html>

試したこと

ネットで色々と調べたのですが原因が分かりません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/11/05 00:40

左から右ではなく右から左へ消えているように見えるし、消したくないというのもわかりません。マウスに関係なく出たままにしたいのですか?
r.baagio10

2018/11/05 00:51

私が作ったのはホバー時にアンダーラインが左から右にアニメーションになる実装になっており なった時点で説明が難しいのですが左右アンダーラインが残っているにはどのようにcss で設定すればいいのでしょうか?
r.baagio10

2018/11/05 01:01

ホバー時にメガドロップダウンメニューが表示される前に ::after擬似要素でアンダーラインが左から右にアニメーションで表示されるのですが hover::after時にアンダーライン左から右に消えてしまいます。 アンダーラインが残るようにするにはどのようにcssで設定すればいいのでしょうか?
dice142

2018/11/05 01:54

「下線が左から右に下線が消えてしまいます。」この記述がよくわかりません。どのタイミングで消えてしまい、理想はどうなってほしいのかを記載してください。
r.baagio10

2018/11/05 02:09

追加したafter画像はホバー時に左から右にアニメーションになり アンダーラインが消えてしまします。理想はbefore画像のようにアンダーラインが残っている状態にしたいのですがうまくいきません。
dice142

2018/11/05 02:13

コメントのbeforeとafterが逆な気がしますが。 やりたいことは「マウスホバーが外れた後もアンダーラインを残したい」ということで良いのですか?
r.baagio10

2018/11/05 02:31

そのとおりです。マウスホバーが外れた後もアンダーラインを残したいことを実行したいです。
guest

回答2

0

ベストアンサー

CSSのhoverはマウスカーソルが乗っている間のみ機能します。
そのため、マウスカーソルが外れるとついていたスタイル(下線)は消えてしまいます。

CSSにはマウスカーソルが乗った後に継続させるという機能はないので、
JavaScriptのonmouseoverイベントで実装する必要があります。
実装方法は複数手段ありますので、どんな実装が良いか調べてみてください。


リンク先のサイトではCSSのhoverのみ使用されています。
マウスカーソルが乗った時に下にメニューが出ますが、それも下線が付く項目の一部の扱いなので
そのメニューにマウスカーソルがある間も下線が消えることなく残るようになっています。

投稿2018/11/05 02:45

編集2018/11/05 03:03
dice142

総合スコア5158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

r.baagio10

2018/11/05 02:49

お聞きしたいのですが https://www.plus1-one.co.jp/ こちらのサイトはjavascriptでmouseover時に実装されるように作られているのでしょうか?
dice142

2018/11/05 02:59

JavaScriptは基本的に生の記述で置いてないので判断できません。 (探すのも手間なのでパッとしか見てないですが。) 私が思いついたのはonmouseoverですが、他にも方法はあるかと思います。
dice142

2018/11/05 03:03

リンク先のサイトの挙動を確認したので回答修正しました。
r.baagio10

2018/11/05 03:07

リンク先のサイトの挙動を確認とを詳しく教えてください。
dice142

2018/11/05 03:10

回答に書いてますが、どこが不明ですか。
r.baagio10

2018/11/05 03:14

いえ、大丈夫です。
guest

0

方向については再現しないのでわかりませんが、リスト内で動かしたいということならliにhoverをつけるべきでしょう。参考にしたサイトもそうなっているはずです。

CSS

1/*.nav ul li a:hover::after {*/ 2.nav ul li:hover a::after { 3

投稿2018/11/05 01:39

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問