🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Q&A

1回答

781閲覧

ハンバーガーメニューjQueryで実装し、ハンバーガーメニューを開いたままpcに戻すとメニューバーが開いたママになる

hiroaki1011

総合スコア5

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

0グッド

0クリップ

投稿2021/03/30 20:26

あるサイトの模写コーディングをしているのですが、jQueryなどでハンバーガーメニューを実装していてスマホ版のハンバーガーメニューを開いたままpc版に戻すと、卒業生の声・実績、メディア、サポートなどの隠したいメニューがhoverされて出現いたします。おそらくjQueryでなんらかのメゾットを加えればハンバーガーメニュー表示状態でpc版に戻しても隠れると思うのですが、、、ご教授頂ければ幸いです。```ここに言語を入力
コード

html <div class="hide-menu"> <ul class="accordion-menu"> <li> <div class="accordion-menu--menu"><span class="text">はじめての方へ</span><span class="plus"></span></div> <ul class="accordion-menu--menu__ul"> <li>マンガでわかるRaiseTech</li> <li>サポート体制</li> <li>トライアル受講</li> <li>就職・転職支援制度</li> <li>ご利用の流れ</li> </ul> </li> <li> //--css---// .accordion-menu { position: absolute; top: 60px; left: 0; width: 100%; background-color: white; &--menu{ font-weight: bold; padding: 8px; display: flex; justify-content: space-between; .plus .text { display: block; position: relative; } .plus { &:after, &:before{ content: ""; display: block; width: 27px; height: 3px; background: #000; border-radius: 5px; } &:before { margin-top: 2px; } &:after { transform: translateY(-50%) rotate(90deg); } } .active { &:after{ opacity: 0; } } } li{ padding: 8px; } //--jQuery--// $(function (){ $('.btn').hover(function(){ $(this).find('.sub-menu').slideDown(200); }, function(){ $(this).find('.sub-menu').hide(); }) }); //ハンバーガーメニュー $(function (){ $(".accordion-menu").hide(); $(".accordion-menu--menu__ul").hide(); $('.humburger-button').click(function(){ $(this).toggleClass("color"); $('.icon').toggleClass("close"); $('.accordion-menu').slideToggle(200); }); $(".accordion-menu--menu").hover(function() { $(this).next().slideToggle(500); $(this).find('.plus').toggleClass('active'); }); });

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

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

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

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

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

guest

回答1

0

メディアクエリを使って、pcサイズの場合は隠したい要素をdisplay:noneにする。

投稿2021/03/31 01:01

Jon_do

総合スコア1373

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問