質問編集履歴
2
コードを見やすくしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
【HTML】
|
|
22
|
+
```
|
|
22
23
|
<div id="global-container">
|
|
23
24
|
<div id="container">
|
|
24
25
|
<div class="mobile-menu__cover"></div>
|
|
@@ -34,7 +35,7 @@
|
|
|
34
35
|
<li class="header__li"><a href="#">Skills</a></li>
|
|
35
36
|
<li class="header__li"><a href="#">Works</a></li>
|
|
36
37
|
<li class="header__li"><a href="#">Service</a></li>
|
|
37
|
-
|
|
38
|
+
・ <li class="header__li"><a href="#">Contact</a></li>
|
|
38
39
|
</ul>
|
|
39
40
|
</nav>
|
|
40
41
|
<button class="mobile-menu__btn">
|
|
@@ -82,7 +83,11 @@
|
|
|
82
83
|
</div>
|
|
83
84
|
<scrip src="mobile-menu.js"></scrip>
|
|
84
85
|
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
|
|
85
89
|
【javascript】
|
|
90
|
+
```
|
|
86
91
|
class MobileMenu {
|
|
87
92
|
constructor() {
|
|
88
93
|
this.DOM = {};
|
|
@@ -110,7 +115,13 @@
|
|
|
110
115
|
new MobileMenu();
|
|
111
116
|
|
|
112
117
|
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
113
122
|
【CSS】
|
|
123
|
+
|
|
124
|
+
```ここに言語を入力
|
|
114
125
|
body{
|
|
115
126
|
width: 100%;
|
|
116
127
|
margin: 0;
|
|
@@ -344,4 +355,5 @@
|
|
|
344
355
|
display: block;
|
|
345
356
|
font-size: 14px;
|
|
346
357
|
color: #535353;
|
|
347
|
-
}
|
|
358
|
+
}
|
|
359
|
+
```
|
1
誤字、脱字、説明不足の補い
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
javascriptでの
|
|
1
|
+
javascriptでのハンバーガメニューが動作しない
|
body
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
・前提、実現したいこと
|
|
2
|
+
|
|
3
|
+
javascriptでwebサイトのヘッダーを制作しています。
|
|
4
|
+
ヘッダーの左側に名前、右側にハンバーガーメニューを作成していて右側のハンバーガーメニューが動作しません。javascriptでの動きをとり入れたハンバーガーメニューを作成しているので上手くいけば、クリックすればメニューが現れるます！
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
・発生している問題
|
|
10
|
+
ハンバーガーメニューをクリックしても全く反応が無く、検証ツールを使ってクリックした瞬間を見てもjavascriptのコードすら反応が無く実装ができない状態です。
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
・問題が発生するまでの流れ
|
|
14
|
+
|
|
15
|
+
①ヘッダーを作る（実装できた）
|
|
16
|
+
②ページローダを作成
|
|
17
|
+
③コードを整える
|
|
18
|
+
③完成したので確認作業（クリックできなくなっていた）
|
|
19
|
+
|
|
20
|
+
|
|
1
21
|
【HTML】
|
|
2
22
|
<div id="global-container">
|
|
3
23
|
<div id="container">
|