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

前提

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

ハンバーガーメニュー設定時に#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ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

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

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

投稿2022/11/21 06:04

Cocode

総合スコア2314

kkkkuuuu

2022/11/21 06:36

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

行動規範の内容に同意します

ベストアンサー

画面を開いた際に#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

総合スコア33699

kkkkuuuu

2022/11/21 06:36

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

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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