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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

ハンバーガーメニューの開閉

riokusa
kkkkuuuu

総合スコア2

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0グッド

0クリップ

267閲覧

投稿2022/11/21 05:49

前提

ハンバーガーメニューでアイコンをクリックするとメニューが出てくるようにしたいです。

ハンバーガーメニュー設定時に#navToggleをクリックすると#navToggleと#globalMenuSpに.activeのクラスが追加されるように
jQueryにて設定しています。

実現したいこと

開閉は上手くいくのですが
画面を開いた際に#globalMenuSpのみ.activeクラスがついてしまいます。
最初はどちらも.activeクラスは付与せずクリックしたときのみ反映させたいです。

発生している問題・エラーメッセージ

画面を開いた際の#globalMenuSpの.activeクラスを削除したいです。

該当のソースコード

html

1 <div class="header-top"> 2 <div class="logo"> 3 <a href=""> 4 <div class="img"> 5 <img src="./asset/image/logo.svg" alt="ロゴ" class="pc"> 6 </div> 7 <div class="min pc768"> 8 <span class="f18">あああああ</span> 9 <p class="f32">ああああ</p> 10 </div> 11 </a> 12 </div> 13 <div class="h-right pc768"> 14 <ul class="list min"> 15 <li><a href="#"><p class="f21">TOP</p><span class="f13">トップページ</span></a></li> 16 <li><a href="#facilities"><p class="f21">PLAN&FACILITY</p><span class="f13">プラン</span></a></li> 17 <li><a href="#location"><p class="f21">LOCATION</p><span class="f13">周辺環境</span></a></li> 18 <li><a href="#outline"><p class="f21">OUTLINE</p><span class="f13">物件概要</span></a></li> 19 </ul> 20 </div> 21 <nav class="nav-box sm768 active" id="globalMenuSp"> 22 <ul class="min"> 23 <li class="tc"> 24 <a href="#"> 25 <p class="f21">TOP</p> <span class="f13">トップページ</span> 26 </a> 27 </li> 28 <li class="tc"> 29 <a href="#plan"> 30 <p class="f21">PLAN&FACILITY</p> <span class="f13">プラン・設備</span> 31 </a> 32 </li> 33 <li> 34 <a href="#location"> 35 <p class="f21">LOCATION</p> <span class="f13">周辺環境</span> 36 </a> 37 </li> 38 <li> 39 <a href="#outline"> 40 <p class="f21">OUTLINE</p> <span class="f13">物件概要</span> 41 </a> 42 </li> 43 </ul> 44 </nav> 45 <!--ハンバーガーメニュー--> 46 <div class="sm768" id="navToggle"> 47 <div class="icon"> 48 <span></span> 49 <span></span> 50 <span></span> 51 </div> 52 </div> 53 </div> 54 55```css 56/*パソコン*/ 57.sm1024 , .sm768 , .sm480{ 58display:none; 59} 60 61/*タブレット*/ 62@media screen and (max-width: 1024px) { 63 .pc1024 { 64 display: none; 65 } 66 .sm1024 { 67 display: block; 68 } 69} 70@media screen and (max-width:768px){ 71 .sm768{ 72 display: block; 73 } 74 .pc768{ 75 display: none; 76 } 77} 78 79 /*ハンバーガーメニュー*/ 80 81 #globalMenuSp { 82 position: fixed; 83 top: 0; 84 right: 0; 85 bottom: 0; 86 left: auto; 87 z-index: 999; 88 -webkit-transform: translateX(100%); 89 transform: translateX(100%); 90 -webkit-transition: all 0.6s; 91 transition: all 0.6s; 92 width: 100%; 93 } 94 #globalMenuSp ul { 95 background-color: #f6faf8; 96 -webkit-box-orient: vertical; 97 -webkit-box-direction: normal; 98 -ms-flex-direction: column; 99 flex-direction: column; 100 display: -webkit-box; 101 display: -ms-flexbox; 102 display: flex; 103 -webkit-box-align: center; 104 -ms-flex-align: center; 105 align-items: center; 106 -webkit-box-pack: start; 107 -ms-flex-pack: start; 108 justify-content: flex-start; 109 -ms-flex-wrap: nowrap; 110 flex-wrap: nowrap; 111 width: 300px; 112 height: 100%; 113 margin-left: auto; 114 margin-right: 0; 115 padding-top: 10%; 116 } 117 #globalMenuSp ul li { 118 width: 100%; 119 border-top: 1px solid #707070; 120 padding-top: 4.66%; 121 padding-bottom: 4.66%; 122 padding-left: 5%; 123 line-height: 1.5; 124 } 125 #globalMenuSp ul li .f20 { 126 color: #6ac5e6; 127 } 128 #globalMenuSp ul li:last-child { 129 border-bottom: 1px solid #707070; 130 } 131 #navToggle { 132 position: relative; 133 z-index: 999; 134 width: 40px; 135 height: 30px; 136 cursor: pointer; 137 } 138 #navToggle.active span:nth-child(1) { 139 -webkit-transform: rotate(-135deg); 140 transform: rotate(-135deg); 141 } 142 #navToggle.active span:nth-child(n + 2) { 143 -webkit-transform: rotate(135deg); 144 transform: rotate(135deg); 145 } 146 #navToggle span { 147 display: inline-block; 148 width: 100%; 149 height: 3px; 150 -webkit-transition: 0.35s; 151 transition: 0.35s; 152 margin-top: auto; 153 margin-right: auto; 154 margin-bottom: auto; 155 margin-left: auto; 156 background-color: #006e37; 157 } 158 #navToggle span:nth-child(1) { 159 position: absolute; 160 top: 0; 161 right: 0; 162 bottom: auto; 163 left: 0; 164 z-index: 0; 165 } 166 #navToggle span:nth-child(2) { 167 position: absolute; 168 top: 0; 169 right: 0; 170 bottom: 0; 171 left: 0; 172 z-index: 0; 173 } 174 #navToggle span:nth-child(3) { 175 position: absolute; 176 top: auto; 177 right: 0; 178 bottom: 0; 179 left: 0; 180 z-index: 0; 181 } 182 #navToggle.active span { 183 position: absolute; 184 top: 0; 185 right: 0; 186 bottom: 0; 187 left: 0; 188 z-index: 0; 189 } 190 #globalMenuSp.active { 191 -webkit-transform: translateX(0%); 192 transform: translateX(0%); 193 } 194```jQuery 195 $('#navToggle').click(function () { 196 $(this).toggleClass('active'); 197 198 if ($(this).hasClass('active')) { 199 $('#globalMenuSp').addClass('active'); 200 } else { 201 $('#globalMenuSp').removeClass('active'); 202 } 203 }); 204 205 206### 試したこと 207 208jQueryで別々に設定、#globalMenuSpを最初display:none;をつけてみたりしましたが 209画面を開いた際にメニューも出てきてしまいます。 210 211### 補足情報(FW/ツールのバージョンなど) 212 213ここにより詳細な情報を記載してください。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

2

html

1<nav class="nav-box sm768 active" id="globalMenuSp">

↑ここのclass名にactiveと書いてあるのが原因かと思われます。
削除したらいけるのではないでしょうか。

投稿2022/11/21 06:04

Cocode

総合スコア2231

spoofy_dragon, kkkkuuuu😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

riokusa

2022/11/21 06:36

初歩的な部分にも関わらず丁寧に回答していただきありがとうございます。 とても助かりました。

0

ベストアンサー

画面を開いた際に#globalMenuSpのみ.activeクラスがついてしまいます。
最初はどちらも.activeクラスは付与せずクリックしたときのみ反映させたいです。

HTMLに activeクラス が付いていますので、それを削除すればいいでしょう。

diff

1- <nav class="nav-box sm768 active" id="globalMenuSp"> 2+ <nav class="nav-box sm768" id="globalMenuSp">

投稿2022/11/21 06:03

hatena19

総合スコア32016

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

riokusa

2022/11/21 06:36

初歩的な部分にも関わらず丁寧に回答していただきありがとうございます。 とても助かりました。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。