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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

996閲覧

サブメニューが表示されていてマウスポインターが乗っている間はテキストボタンの背景色を表示させたままにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/08/09 10:00

初歩的かもしれませんがお願いします。

テキストボタンをロールオーバーするとその下にメニューがフェードインで表示されテキストボタンに背景色もフェードインされる仕組みです。こちらはロールオーバーすると「is_active」というクラスをメインのテキストとサブメニューにaddClassしてtransitionでフェードインさせています。
以下ソースコードです。

html

1<header> 2 <div id="navpanel"> 3 <p>ナビゲーションパネル</p> 4 </div> 5</header> 6<nav id="gNav"> 7 <ul> 8 <li><a href="#">ナビゲーション1</a></li> 9 <li><a href="#">ナビゲーション2</a></li> 10 <li><a href="#">ナビゲーション3</a></li> 11 <li><a href="#">ナビゲーション4</a></li> 12 <li><a href="#">ナビゲーション5</a></li> 13 </ul> 14</nav> 15

css

1* { 2 margin: 0; 3 padding: 0; 4} 5 6header { 7 display: block; 8 padding: ; 9 border-bottom: 1px solid #ccc; 10} 11 12#navpanel { 13 width: 200px; 14 padding: 20px; 15 cursor: pointer; 16 background-color: #fff; 17 transition: all 0.4s ease; 18} 19 20#navpanel.is_active { 21 background-color: #ccc; 22} 23#gNav { 24 position: absolute; 25} 26#gNav ul { 27 display: flex; 28 list-style-type: none; 29 padding: 20px; 30 opacity: 0; 31 background-color: #ccc; 32 transition: all 0.4s ease; 33} 34 35#gNav ul.is_active { 36 opacity: 1; 37} 38 39#gNav ul li { 40 font-size: 14px; 41 margin-left: 10px; 42 transform: translate(0, 10px); 43 visibility: hidden; 44 opacity: 0; 45 transition: all 0.4s ease 0.2s; 46} 47 48#gNav ul.is_active li { 49 transform: translate(0, 0); 50 visibility: visible; 51 opacity: 1; 52} 53 54#gNav ul.is_active li:nth-child(1) { 55 transition: all 0.4s ease 0.13s; 56} 57#gNav ul.is_active li:nth-child(2) { 58 transition: all 0.4s ease 0.16s; 59} 60#gNav ul.is_active li:nth-child(3) { 61 transition: all 0.4s ease 0.19s; 62} 63#gNav ul.is_active li:nth-child(4) { 64 transition: all 0.4s ease 0.2s; 65} 66#gNav ul.is_active li:nth-child(5) { 67 transition: all 0.4s ease 0.23s; 68} 69 70#gNav ul li a { 71 color: #333; 72 text-decoration: none; 73} 74

jquery

1 2$("#navpanel").hover( 3 function() { 4 $(this).addClass("is_active"); 5 $("#gNav ul").addClass("is_active"); 6 }, 7 function() { 8 $("#gNav ul").removeClass("is_active"); 9 $(this).removeClass("is_active"); 10 } 11); 12 13

この処理だとテキストボタンからマウスポインターが外れると、当たり前ですがロールアウトになりテキストボタンとサブメニューがフェードアウトします。

ただテキストボタンにマウスオーバーしてサブメニューが表示されてるときに、サブメニューにマウスポインターが乗った場合は、テキストボタンの背景色も表示させたままにしたいのです。

しかし、その処理が分かりません。

ご教授いただければ幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

html

1<style> 2* { 3 margin: 0; 4 padding: 0; 5} 6header { 7 display: block; 8 border-bottom: 1px solid #ccc; 9} 10#navpanel { 11 position: relative; 12 width: 200px; 13 padding: 20px; 14 cursor: pointer; 15 background-color: #fff; 16 transition: all 0.4s ease; 17} 18#navpanel.is_active { 19 background-color: #ccc; 20} 21#gNav { 22 position: absolute; 23 top: 65px; 24 left: 0; 25} 26#gNav ul { 27 display: flex; 28 list-style-type: none; 29 padding: 20px; 30 opacity: 0; 31 background-color: #ccc; 32 transition: all 0.4s ease; 33} 34#gNav ul.is_active { 35 opacity: 1; 36} 37#gNav ul li { 38 font-size: 14px; 39 margin-left: 10px; 40 transform: translate(0, 10px); 41 visibility: hidden; 42 opacity: 0; 43 transition: all 0.4s ease 0.2s; 44 white-space: nowrap; 45} 46#gNav ul.is_active li { 47 transform: translate(0, 0); 48 visibility: visible; 49 opacity: 1; 50} 51#gNav ul.is_active li:nth-child(1) { 52 transition: all 0.4s ease 0.13s; 53} 54#gNav ul.is_active li:nth-child(2) { 55 transition: all 0.4s ease 0.16s; 56} 57#gNav ul.is_active li:nth-child(3) { 58 transition: all 0.4s ease 0.19s; 59} 60#gNav ul.is_active li:nth-child(4) { 61 transition: all 0.4s ease 0.2s; 62} 63#gNav ul.is_active li:nth-child(5) { 64 transition: all 0.4s ease 0.23s; 65} 66#gNav ul li a { 67 color: #333; 68 text-decoration: none; 69} 70</style> 71<header> 72 <div id="navpanel"> 73 <p>ナビゲーションパネル</p> 74 <nav id="gNav"> 75 <ul> 76 <li><a href="#">ナビゲーション1</a></li> 77 <li><a href="#">ナビゲーション2</a></li> 78 <li><a href="#">ナビゲーション3</a></li> 79 <li><a href="#">ナビゲーション4</a></li> 80 <li><a href="#">ナビゲーション5</a></li> 81 </ul> 82 </nav> 83 </div> 84</header> 85<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script> 86<script> 87 $("#navpanel").hover( 88 function() { 89 $(this).addClass("is_active"); 90 $("#gNav ul").addClass("is_active"); 91 }, 92 function() { 93 $("#gNav ul").removeClass("is_active"); 94 $(this).removeClass("is_active"); 95 } 96 ); 97</script>

投稿2019/08/09 12:20

yasutomi

総合スコア2937

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

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

退会済みユーザー

退会済みユーザー

2019/08/09 18:33

回答ありがとうございます。 ちなみに上記のパターンだと幅を200pxに指定しています。 するとナビゲーションは収まらない感じになります。 ですので、ナビゲーションの幅を800pxとかしても、ルール上?は問題ない感じですかね。 絶対配置にしてるので、問題ないと思いますが。。
yasutomi

2019/08/10 04:12

絶対配置にしてるので幅を800pxとかしても問題ないです。
退会済みユーザー

退会済みユーザー

2019/08/11 16:04

ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問