質問編集履歴
7
試したことの追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -349,3 +349,73 @@
|
|
|
349
349
|
参考にしたサイトです。```https://tech-dig.jp/hamburger-global-nav/
|
|
350
350
|
|
|
351
351
|
```
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
|
|
357
|
+
### 試したこと
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
aタグにclass="close"を追加し、JavaScriptでclass="close"を取得しリンクをクリックした時に.nav-openのクラスを削除しハンバーガーメニューを閉じる。
|
|
362
|
+
|
|
363
|
+
これを試してみましたがエラーが出てしまいました。コードの書き方など間違っている可能性があります。
|
|
364
|
+
|
|
365
|
+
エラー↓
|
|
366
|
+
|
|
367
|
+
index.html:437 Uncaught TypeError: target.addEventListener is not a function at toggleNav (index.html:437)at index.html:442
|
|
368
|
+
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
変更点↓
|
|
372
|
+
|
|
373
|
+
css
|
|
374
|
+
|
|
375
|
+
<li class="nav-item"><a href="#campaign" class="close">campaign<span class="jp">キャンペーン</span></a></li>
|
|
376
|
+
|
|
377
|
+
|
|
378
|
+
|
|
379
|
+
JavaScript
|
|
380
|
+
|
|
381
|
+
|
|
382
|
+
|
|
383
|
+
function toggleNav() {
|
|
384
|
+
|
|
385
|
+
var body = document.body;
|
|
386
|
+
|
|
387
|
+
var hamburger = document.getElementById('js-hamburger');
|
|
388
|
+
|
|
389
|
+
var blackBg = document.getElementById('js-black-bg');
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
|
|
393
|
+
hamburger.addEventListener('click', function() {
|
|
394
|
+
|
|
395
|
+
body.classList.toggle('nav-open');
|
|
396
|
+
|
|
397
|
+
});
|
|
398
|
+
|
|
399
|
+
|
|
400
|
+
|
|
401
|
+
blackBg.addEventListener('click', function() {
|
|
402
|
+
|
|
403
|
+
body.classList.remove('nav-open');
|
|
404
|
+
|
|
405
|
+
});
|
|
406
|
+
|
|
407
|
+
|
|
408
|
+
|
|
409
|
+
//追加したコード
|
|
410
|
+
|
|
411
|
+
let target = document.getElementsByClassName('close');
|
|
412
|
+
|
|
413
|
+
target.addEventListener('click', function() {
|
|
414
|
+
|
|
415
|
+
body.classList.remove('nav-open');
|
|
416
|
+
|
|
417
|
+
});
|
|
418
|
+
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
toggleNav();
|
6
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -10,9 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
<li class="nav-item">の中のaタグをクリックした時にJavaScriptで付与した.nav-openのクラスを削除するという動きだとは思うのですが
|
|
13
|
+
おそらく、<li class="nav-item">の中のaタグをクリックした時にJavaScriptで付与した.nav-openのクラスを削除するという動きだとは思うのですが、どのように記述すればいいか教えていただきたいです。
|
|
14
|
-
|
|
15
|
-
どのように記述すればいいか教えていただきたいです。
|
|
16
14
|
|
|
17
15
|
|
|
18
16
|
|
5
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
|
|
9
9
|
ハンバーガーメニューのHTML、CSS、JavaScriptは一部ネットからのコピペがあります。他にも調べたのですが閉じるための記述が現状分かりません。
|
|
10
10
|
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
<li class="nav-item">の中のaタグをクリックした時にJavaScriptで付与した.nav-openのクラスを削除するという動きだとは思うのですが
|
|
14
|
+
|
|
11
15
|
どのように記述すればいいか教えていただきたいです。
|
|
12
16
|
|
|
13
17
|
|
4
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
ハンバーガーメニューのHTML、CSS、JavaScriptは一部ネットからのコピペの
|
|
9
|
+
ハンバーガーメニューのHTML、CSS、JavaScriptは一部ネットからのコピペがあります。他にも調べたのですが閉じるための記述が現状分かりません。
|
|
10
10
|
|
|
11
11
|
どのように記述すればいいか教えていただきたいです。
|
|
12
12
|
|
3
コードの追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -252,6 +252,22 @@
|
|
|
252
252
|
|
|
253
253
|
}
|
|
254
254
|
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
/*ページ内リンク位置調整（ヘッダーの高さ分）*/
|
|
258
|
+
|
|
259
|
+
.anchor{
|
|
260
|
+
|
|
261
|
+
display: block;
|
|
262
|
+
|
|
263
|
+
padding-top: 60px;
|
|
264
|
+
|
|
265
|
+
margin-top: -60px;
|
|
266
|
+
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
|
|
255
271
|
```
|
|
256
272
|
|
|
257
273
|
|
2
コードの追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -264,6 +264,8 @@
|
|
|
264
264
|
|
|
265
265
|
```JavaScript
|
|
266
266
|
|
|
267
|
+
//ハンバーガーメニュー
|
|
268
|
+
|
|
267
269
|
function toggleNav() {
|
|
268
270
|
|
|
269
271
|
var body = document.body;
|
|
@@ -292,6 +294,32 @@
|
|
|
292
294
|
|
|
293
295
|
toggleNav();
|
|
294
296
|
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
//ページ内リンク
|
|
300
|
+
|
|
301
|
+
$(function(){
|
|
302
|
+
|
|
303
|
+
$('a[href^="#"]').click(function(){
|
|
304
|
+
|
|
305
|
+
var speed = 500;
|
|
306
|
+
|
|
307
|
+
var href= $(this).attr("href");
|
|
308
|
+
|
|
309
|
+
var target = $(href == "#" || href == "" ? 'html' : href);
|
|
310
|
+
|
|
311
|
+
var position = target.offset().top;
|
|
312
|
+
|
|
313
|
+
$("html, body").animate({scrollTop:position}, speed, "swing");
|
|
314
|
+
|
|
315
|
+
return false;
|
|
316
|
+
|
|
317
|
+
});
|
|
318
|
+
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
});
|
|
322
|
+
|
|
295
323
|
```
|
|
296
324
|
|
|
297
325
|
|
1
コードの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,49 +18,51 @@
|
|
|
18
18
|
|
|
19
19
|
```HTML
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
<nav class="nav">
|
|
22
|
-
|
|
22
|
+
|
|
23
|
-
|
|
23
|
+
<ul class="nav-list">
|
|
24
|
-
|
|
24
|
+
|
|
25
|
-
|
|
25
|
+
<li class="nav-item"><a href="#campaign">campaign<span class="jp">キャンペーン</span></a></li>
|
|
26
|
-
|
|
26
|
+
|
|
27
|
-
|
|
27
|
+
<li class="nav-item"><a href="#point">point<span class="jp">店舗の強み</span></a></li>
|
|
28
|
-
|
|
28
|
+
|
|
29
|
-
|
|
29
|
+
<li class="nav-item"><a href="#facility">facility<span class="jp">施設紹介</span></a></li>
|
|
30
|
-
|
|
30
|
+
|
|
31
|
-
|
|
31
|
+
<li class="nav-item"><a href="#price">price<span class="jp">料金案内</span></a></li>
|
|
32
|
-
|
|
32
|
+
|
|
33
|
-
|
|
33
|
+
<li class="nav-item"><a href="#faq">faq<span class="jp">よくあるご質問</span></a></li>
|
|
34
|
-
|
|
34
|
+
|
|
35
|
-
|
|
35
|
+
<li class="nav-item"><a href="#access">access<span class="jp">アクセス</span></a></li>
|
|
36
|
-
|
|
36
|
+
|
|
37
|
-
|
|
37
|
+
</ul>
|
|
38
|
-
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
39
|
-
|
|
41
|
+
<ul class="btn-list">
|
|
40
|
-
|
|
42
|
+
|
|
41
|
-
|
|
43
|
+
<li class="btn-item"><a href="">WEB入会はこちら</a></li>
|
|
42
|
-
|
|
44
|
+
|
|
43
|
-
|
|
45
|
+
<li class="btn-item"><a href="">見学・体験予約はこちら</a></li>
|
|
44
|
-
|
|
46
|
+
|
|
45
|
-
|
|
47
|
+
<li class="btn-item"><a href="">お問い合わせ</a></li>
|
|
46
|
-
|
|
48
|
+
|
|
47
|
-
|
|
49
|
+
</ul>
|
|
48
|
-
|
|
50
|
+
|
|
49
|
-
|
|
51
|
+
</nav>
|
|
50
52
|
|
|
51
53
|
|
|
52
54
|
|
|
53
|
-
|
|
55
|
+
<div class="hamburger" id="js-hamburger">
|
|
54
|
-
|
|
56
|
+
|
|
55
|
-
|
|
57
|
+
<span class="hamburger__line hamburger__line--1"></span>
|
|
56
|
-
|
|
58
|
+
|
|
57
|
-
|
|
59
|
+
<span class="hamburger__line hamburger__line--2"></span>
|
|
58
|
-
|
|
60
|
+
|
|
59
|
-
|
|
61
|
+
<span class="hamburger__line hamburger__line--3"></span>
|
|
60
|
-
|
|
62
|
+
|
|
61
|
-
|
|
63
|
+
</div>
|
|
62
|
-
|
|
64
|
+
|
|
63
|
-
|
|
65
|
+
<div class="black-bg" id="js-black-bg"></div>
|
|
64
66
|
|
|
65
67
|
|
|
66
68
|
|