質問編集履歴
1
html,css内のclassをidに変更し、javascriptのコードも変更しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
### 前提・実現したいこと
|
|
1
|
+
```### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -20,9 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
### 該当のソースコード
|
|
22
22
|
|
|
23
|
-
-html-
|
|
24
|
-
|
|
25
|
-
<!DOCTYPE html>
|
|
23
|
+
```<!DOCTYPE html>
|
|
26
24
|
|
|
27
25
|
<html lang="ja">
|
|
28
26
|
|
|
@@ -42,17 +40,13 @@
|
|
|
42
40
|
|
|
43
41
|
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
|
|
44
42
|
|
|
45
|
-
<script type="text/javascript" src="javascript
|
|
43
|
+
<script type="text/javascript" src="javascript4.js"></script>
|
|
46
44
|
|
|
47
45
|
</head>
|
|
48
46
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<body>
|
|
52
|
-
|
|
53
47
|
<header>
|
|
54
48
|
|
|
55
|
-
<nav
|
|
49
|
+
<nav id="nav">
|
|
56
50
|
|
|
57
51
|
<ul class="nav_menu_ul">
|
|
58
52
|
|
|
@@ -80,7 +74,7 @@
|
|
|
80
74
|
|
|
81
75
|
|
|
82
76
|
|
|
83
|
-
<span
|
|
77
|
+
<span id="nav_toggle">
|
|
84
78
|
|
|
85
79
|
<i></i>
|
|
86
80
|
|
|
@@ -90,17 +84,15 @@
|
|
|
90
84
|
|
|
91
85
|
</span>
|
|
92
86
|
|
|
93
|
-
</header>
|
|
87
|
+
</header>
|
|
94
|
-
|
|
95
|
-
</body>
|
|
96
88
|
|
|
97
89
|
</html>
|
|
98
90
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
91
|
+
```
|
|
92
|
+
|
|
102
|
-
|
|
93
|
+
```
|
|
94
|
+
|
|
103
|
-
|
|
95
|
+
#nav_toggle {
|
|
104
96
|
|
|
105
97
|
display: block;
|
|
106
98
|
|
|
@@ -116,7 +108,7 @@
|
|
|
116
108
|
|
|
117
109
|
}
|
|
118
110
|
|
|
119
|
-
|
|
111
|
+
#nav_toggle i {
|
|
120
112
|
|
|
121
113
|
display: block;
|
|
122
114
|
|
|
@@ -132,13 +124,13 @@
|
|
|
132
124
|
|
|
133
125
|
}
|
|
134
126
|
|
|
135
|
-
|
|
127
|
+
#nav_toggle i:nth-child(1) {
|
|
136
128
|
|
|
137
129
|
top: 0;
|
|
138
130
|
|
|
139
131
|
}
|
|
140
132
|
|
|
141
|
-
|
|
133
|
+
#nav_toggle i:nth-child(2) {
|
|
142
134
|
|
|
143
135
|
top: 0;
|
|
144
136
|
|
|
@@ -148,25 +140,25 @@
|
|
|
148
140
|
|
|
149
141
|
}
|
|
150
142
|
|
|
151
|
-
|
|
143
|
+
#nav_toggle i:nth-child(3) {
|
|
152
144
|
|
|
153
145
|
bottom: 0;
|
|
154
146
|
|
|
155
147
|
}
|
|
156
148
|
|
|
157
|
-
|
|
149
|
+
#nav_toggle.show i:nth-child(1) {
|
|
158
150
|
|
|
159
151
|
transform: translateY(10px) rotate(-45deg);
|
|
160
152
|
|
|
161
153
|
}
|
|
162
154
|
|
|
163
|
-
|
|
155
|
+
#nav_toggle.show i:nth-child(2) {
|
|
164
156
|
|
|
165
157
|
opacity: 0;
|
|
166
158
|
|
|
167
159
|
}
|
|
168
160
|
|
|
169
|
-
|
|
161
|
+
#nav_toggle.show i:nth-child(3) {
|
|
170
162
|
|
|
171
163
|
transform: translateY(-12px) rotate(45deg);
|
|
172
164
|
|
|
@@ -196,7 +188,7 @@
|
|
|
196
188
|
|
|
197
189
|
}
|
|
198
190
|
|
|
199
|
-
|
|
191
|
+
#nav.show {
|
|
200
192
|
|
|
201
193
|
opacity: 1;
|
|
202
194
|
|
|
@@ -204,17 +196,19 @@
|
|
|
204
196
|
|
|
205
197
|
}
|
|
206
198
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
199
|
+
```
|
|
200
|
+
|
|
210
|
-
|
|
201
|
+
```
|
|
202
|
+
|
|
211
|
-
$(
|
|
203
|
+
$('#nav_toggle').on('click', function () {
|
|
212
|
-
|
|
204
|
+
|
|
213
|
-
$(
|
|
205
|
+
$('#nav_toggle').toggleClass('.show');
|
|
206
|
+
|
|
214
|
-
|
|
207
|
+
$('#nav').toggleClass('.show')
|
|
208
|
+
|
|
215
|
-
});
|
|
209
|
+
});コード
|
|
210
|
+
|
|
216
|
-
|
|
211
|
+
```
|
|
217
|
-
|
|
218
212
|
|
|
219
213
|
|
|
220
214
|
|