teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問javaScriptでクラスを追加し、そのクラスが追加されたらcssでtransformを解除したいです！！

編集履歴

質問編集履歴

2

コードの修正

2021/10/19 07:16

投稿

music
music

スコア13

test CHANGED
File without changes
test CHANGED
@@ -20,11 +20,35 @@
20
20
 
21
21
  ```HTML
22
22
 
23
+ <div class="mobile">
24
+
25
+ <nav id="nav">
26
+
27
+ <div class="hum">
28
+
29
+ <div class="title">
30
+
31
+ <p>店名</p>
32
+
33
+ </div>
34
+
35
+ <img id="open-btn" src="mobile-images/hum-menu.jpg" alt="">
36
+
37
+ </div>
38
+
39
+
40
+
41
+
42
+
43
+ </nav>
44
+
45
+
46
+
23
- <nav id="nav-active">
47
+ <nav id="nav-active">
24
48
 
25
49
  <div class="hum-active">
26
50
 
27
- <img class="close-btn" src="mobile-images/hum-active.jpg" alt="">
51
+ <img id="close-btn" src="mobile-images/hum-active.jpg" alt="">
28
52
 
29
53
 
30
54
 
@@ -34,7 +58,7 @@
34
58
 
35
59
  <ul>
36
60
 
37
- <li><a id="nav-btn" href="index.html">ホーム</a></li>
61
+ <li><a id="nav-btn" href="#body">ホーム</a></li>
38
62
 
39
63
  <li><a id="nav-btn" href="menu.html">お品書き</a></li>
40
64
 
@@ -48,168 +72,320 @@
48
72
 
49
73
  <p>ご予約・お問い合わせ</p>
50
74
 
75
+ <p class="call-number">0858-71-1788</p>
76
+
77
+ </div>
78
+
79
+ </nav>
80
+
81
+
82
+
83
+
84
+
85
+
86
+
87
+ <div class="top-image">
88
+
89
+ <!--<div class="top-logo">
90
+
91
+ <img class="mobile-logo" src="mobile-images/mobile-logo.png" alt="">
92
+
93
+ </div>-->
94
+
95
+ </div>
96
+
97
+ </div>
98
+
99
+ ```
100
+
101
+
102
+
103
+ ```scss
104
+
105
+ #nav{
106
+
107
+ //display: none;
108
+
109
+ width: 100%;
110
+
111
+ height: 65px;
112
+
113
+ position: fixed;
114
+
115
+ // position: absolute;
116
+
117
+ z-index: 2;
118
+
119
+ // top: 0;
120
+
121
+ background-image: url(../mobile-images/mobile-header.jpg);
122
+
123
+ box-shadow: 0px 3px 6px rgba($color: #4A3A2A, $alpha: 1);
124
+
125
+
126
+
127
+ .hum{
128
+
129
+ //display: none;
130
+
131
+ display: flex;
132
+
133
+ justify-content: space-between;
134
+
135
+ align-items: center;
136
+
137
+ line-height: 100%;
138
+
51
139
 
52
140
 
141
+
142
+
143
+ .title{
144
+
145
+ @include font(20px);
146
+
147
+ margin: 0 auto;
148
+
149
+ }
150
+
151
+
152
+
153
+ img{
154
+
155
+ width: 65px;
156
+
157
+ }
158
+
159
+ }
160
+
161
+ }
162
+
163
+
164
+
165
+ .passive{
166
+
167
+ display: none;
168
+
169
+ }
170
+
171
+
172
+
173
+
174
+
175
+
176
+
177
+ #nav-active{
178
+
179
+ //display: none;
180
+
181
+ width: 100%;
182
+
183
+ //height: 100vh;
184
+
185
+ position: fixed;
186
+
187
+ // position: absolute;
188
+
189
+ z-index: 10;
190
+
53
- </div>
191
+ // top: 0;
192
+
54
-
193
+ transform: translateX(-50%);
194
+
195
+ transition: .1s;
196
+
197
+
198
+
199
+
200
+
201
+ .hum-active{
202
+
203
+ height: 100vh;
204
+
205
+ //vh→画面のサイズに合わせる
206
+
207
+ background-color: rgba($color: #2E2E2E, $alpha: 0.8);
208
+
209
+ #close-btn{
210
+
211
+ width: 65px;
212
+
213
+ position: absolute;
214
+
215
+ top: 0;
216
+
217
+ right: 0;
218
+
219
+ }
220
+
221
+
222
+
223
+ .hum-logo{
224
+
225
+ display: block;
226
+
227
+ width: 279px;
228
+
229
+ margin: 0 auto;
230
+
231
+ padding-top: 15%;
232
+
233
+ }
234
+
235
+
236
+
237
+ ul{
238
+
239
+ list-style: none;
240
+
241
+ @include font(24px);
242
+
243
+ letter-spacing: 00.05em;
244
+
245
+ padding: 0;
246
+
247
+ text-align: center;
248
+
249
+
250
+
251
+ li{
252
+
253
+ padding-bottom: 15%;
254
+
255
+
256
+
257
+ a{
258
+
259
+ text-decoration: none;
260
+
261
+ color: white
262
+
263
+ }
264
+
265
+ }
266
+
267
+ }
268
+
269
+
270
+
271
+ p{
272
+
273
+ @include font(22px);
274
+
275
+ color: white;
276
+
277
+ text-align: center;
278
+
279
+ margin: 0;
280
+
281
+ }
282
+
283
+
284
+
285
+ .call-number{
286
+
287
+ @include white(Hiragino Mincho ProN);
288
+
289
+ font-size: 34px;
290
+
291
+ }
292
+
293
+ }
294
+
295
+ }
296
+
297
+
298
+
299
+ .active{
300
+
301
+ transform: none;
302
+
55
- </nav>
303
+ //display: none;
304
+
305
+ }
306
+
307
+
308
+
309
+
310
+
311
+
312
+
313
+
314
+
315
+ .top-image{
316
+
317
+ margin: 0 auto;
318
+
319
+ max-width: 666px; //追加
320
+
321
+ width: 100%; //修正
322
+
323
+ height: 443px;
324
+
325
+ background-image: url(../mobile-images/mobile-index-top5.jpg);
326
+
327
+ background-repeat: no-repeat;
328
+
329
+ background-size: 666px;
330
+
331
+ background-position: top center; //追加
332
+
333
+ position: relative;
334
+
335
+ z-index: 1;
336
+
337
+ }
56
338
 
57
339
  ```
58
340
 
59
341
 
60
342
 
61
- ```scss
62
-
63
- @mixin font($font-size) {
64
-
65
- font-size: $font-size;
66
-
67
- font-family: Shippori Mincho;
68
-
69
- color: #551906;
70
-
71
- }
72
-
73
-
74
-
75
- #nav-active{
76
-
77
- //display: none;
78
-
79
- width: 100%;
80
-
81
- //height: 100vh;
82
-
83
- position: fixed;
84
-
85
- // position: absolute;
86
-
87
- z-index: 10;
88
-
89
- // top: 0;
90
-
91
- transform: translateX(-50%);
92
-
93
- transition: .1s;
94
-
95
-
96
-
97
-
98
-
99
- .hum-active{
100
-
101
- height: 100vh;
102
-
103
- //vh→画面のサイズに合わせる
104
-
105
- background-color: rgba($color: #2E2E2E, $alpha: 0.8);
106
-
107
- .close-btn{
108
-
109
- width: 65px;
110
-
111
- position: absolute;
112
-
113
- top: 0;
114
-
115
- right: 0;
116
-
117
- }
118
-
119
-
120
-
121
- .hum-logo{
122
-
123
- display: block;
124
-
125
- width: 279px;
126
-
127
- margin: 0 auto;
128
-
129
- padding-top: 15%;
130
-
131
- }
132
-
133
-
134
-
135
- ul{
136
-
137
- list-style: none;
138
-
139
- @include font(24px);
140
-
141
- letter-spacing: 00.05em;
142
-
143
- padding: 0;
144
-
145
- text-align: center;
146
-
147
-
148
-
149
- li{
150
-
151
- padding-bottom: 15%;
152
-
153
-
154
-
155
- a{
156
-
157
- text-decoration: none;
158
-
159
- color: white
160
-
161
- }
162
-
163
- }
164
-
165
- }
166
-
167
-
168
-
169
- p{
170
-
171
- @include font(22px);
172
-
173
- color: white;
174
-
175
- text-align: center;
176
-
177
- margin: 0;
178
-
179
- }
180
-
181
- }
182
-
183
- }
184
-
185
-
186
-
187
- .active{
188
-
189
- transform: none;
190
-
191
- //display: none;
192
-
193
- }
343
+ ```javascript
344
+
345
+ const open_btn = document.getElementById('open-btn');
346
+
347
+ const close_btn = document.getElementById('close-btn');
348
+
349
+ const nav_btn = document.getElementById('nav-btn');
350
+
351
+
352
+
353
+ open_btn.addEventListener('click', e => {
354
+
355
+ e.preventDefault()
356
+
357
+ document.getElementById('nav').classList.add('passive')
358
+
359
+ document.getElementById("nav-active").classList.add("active")
360
+
361
+ });
362
+
363
+
364
+
365
+
366
+
367
+ close_btn.addEventListener('click', e => {
368
+
369
+ e.preventDefault()
370
+
371
+ document.getElementById('nav').classList.remove('passive')
372
+
373
+ document.getElementById('nav-active').classList.remove('active')
374
+
375
+ });
376
+
377
+
378
+
379
+
380
+
381
+ nav_btn.addEventListener('click', e => {
382
+
383
+ e.preventDefault()
384
+
385
+ document.getElementById('nav').classList.remove('passive')
386
+
387
+ document.getElementById('nav-active').classList.remove('active')
388
+
389
+ });
194
390
 
195
391
  ```
196
-
197
-
198
-
199
- ```javascript
200
-
201
- const nav_btn = document.getElementById("open-btn");
202
-
203
-
204
-
205
- nav_btn.addEventListener('click', e => {
206
-
207
- e.preventDefault()
208
-
209
- document.getElementById('nav').classList.add('passive')
210
-
211
- document.getElementById("nav-active").classList.add("active")
212
-
213
- });
214
-
215
- ```

1

コードの追加

2021/10/19 07:16

投稿

music
music

スコア13

test CHANGED
File without changes
test CHANGED
@@ -198,6 +198,10 @@
198
198
 
199
199
  ```javascript
200
200
 
201
+ const nav_btn = document.getElementById("open-btn");
202
+
203
+
204
+
201
205
  nav_btn.addEventListener('click', e => {
202
206
 
203
207
  e.preventDefault()