質問編集履歴
2
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -216,66 +216,152 @@
|
|
|
216
216
|
|
|
217
217
|
}
|
|
218
218
|
|
|
219
|
+
.header-menu {
|
|
220
|
+
|
|
221
|
+
display: none;
|
|
222
|
+
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.header-sub {
|
|
226
|
+
|
|
227
|
+
display: none;
|
|
228
|
+
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.nav-button {
|
|
232
|
+
|
|
233
|
+
display: none;
|
|
234
|
+
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.nav-button, .nav-button span {
|
|
238
|
+
|
|
239
|
+
display: inline-block;
|
|
240
|
+
|
|
241
|
+
transition: all 0.4s;
|
|
242
|
+
|
|
243
|
+
box-sizing: border-box;
|
|
244
|
+
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.nav-button {
|
|
248
|
+
|
|
249
|
+
z-index: 20;
|
|
250
|
+
|
|
251
|
+
position: relative;
|
|
252
|
+
|
|
253
|
+
width: 40px;
|
|
254
|
+
|
|
255
|
+
height: 0px;
|
|
256
|
+
|
|
257
|
+
}
|
|
258
|
+
|
|
219
|
-
|
|
259
|
+
.nav-button span {
|
|
220
|
-
|
|
260
|
+
|
|
221
|
-
position: absolute;
|
|
261
|
+
position: absolute;
|
|
262
|
+
|
|
222
|
-
|
|
263
|
+
left: 800%;
|
|
264
|
+
|
|
265
|
+
width: 100%;
|
|
266
|
+
|
|
223
|
-
|
|
267
|
+
height: 4px;
|
|
268
|
+
|
|
269
|
+
background-color: #333;
|
|
270
|
+
|
|
271
|
+
border-radius: 4px;
|
|
272
|
+
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.nav-button span:nth-of-type(1) {
|
|
276
|
+
|
|
277
|
+
margin: 25% 0 0 0;
|
|
278
|
+
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.nav-button span:nth-of-type(2) {
|
|
282
|
+
|
|
283
|
+
margin: 45% 0 0 0;
|
|
284
|
+
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.nav-button span:nth-of-type(3) {
|
|
288
|
+
|
|
289
|
+
margin: 65% 0 0 0;
|
|
290
|
+
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.nav-button.active span:nth-of-type(1) {
|
|
294
|
+
|
|
295
|
+
-webkit-transform: translateY(16px) rotate(-45deg);
|
|
296
|
+
|
|
297
|
+
transform: translateY(16px) rotate(-45deg);
|
|
298
|
+
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.nav-button.active span:nth-of-type(2) {
|
|
302
|
+
|
|
303
|
+
opacity: 0;
|
|
304
|
+
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.nav-button.active span:nth-of-type(3) {
|
|
308
|
+
|
|
309
|
+
-webkit-transform: translateY(-16px) rotate(45deg);
|
|
310
|
+
|
|
311
|
+
transform: translateY(-16px) rotate(45deg);
|
|
312
|
+
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
#gloval-nav.open {
|
|
316
|
+
|
|
317
|
+
display: block;
|
|
318
|
+
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
|
|
322
|
+
|
|
323
|
+
#gloval-nav.close {
|
|
324
|
+
|
|
325
|
+
display: none;
|
|
326
|
+
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
#gloval-nav ul {
|
|
330
|
+
|
|
331
|
+
background: rgb(76,76,76,0.8);
|
|
332
|
+
|
|
333
|
+
position: relative;
|
|
334
|
+
|
|
335
|
+
top: -35px;
|
|
336
|
+
|
|
337
|
+
padding: 10% 0 100% 0;
|
|
338
|
+
|
|
339
|
+
width: 100%;
|
|
340
|
+
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
#gloval-nav li {
|
|
348
|
+
|
|
349
|
+
font-size: 1em;
|
|
350
|
+
|
|
351
|
+
padding: 2% 0 0 35%;
|
|
352
|
+
|
|
353
|
+
width: 100%;
|
|
354
|
+
|
|
355
|
+
margin: 0;
|
|
356
|
+
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
#gloval-nav a {
|
|
360
|
+
|
|
361
|
+
color: white;
|
|
224
362
|
|
|
225
363
|
display: block;
|
|
226
364
|
|
|
227
|
-
font-size: 2rem;
|
|
228
|
-
|
|
229
|
-
top: 30%;
|
|
230
|
-
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
.white {
|
|
234
|
-
|
|
235
|
-
color: white;
|
|
236
|
-
|
|
237
|
-
font-weight: 200;
|
|
238
|
-
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
#gloval-nav {
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
#gloval-nav ul {
|
|
250
|
-
|
|
251
|
-
background: rgb(76,76,76,0.8);
|
|
252
|
-
|
|
253
|
-
margin: 0 auto;
|
|
254
|
-
|
|
255
|
-
padding: 15% 0 100% 0;
|
|
256
|
-
|
|
257
|
-
width: 100%;
|
|
258
|
-
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
#gloval-nav li {
|
|
262
|
-
|
|
263
|
-
font-size: 1em;
|
|
264
|
-
|
|
265
|
-
padding: 2% 0 0 35%;
|
|
266
|
-
|
|
267
|
-
width: 100%;
|
|
268
|
-
|
|
269
|
-
margin: 0;
|
|
270
|
-
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
#gloval-nav a {
|
|
274
|
-
|
|
275
|
-
color: white;
|
|
276
|
-
|
|
277
|
-
display: block;
|
|
278
|
-
|
|
279
365
|
text-align: left;
|
|
280
366
|
|
|
281
367
|
}
|
1
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -54,48 +54,48 @@
|
|
|
54
54
|
|
|
55
55
|
</div>
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
<a class="nav-button" href="#">
|
|
58
|
+
|
|
58
|
-
|
|
59
|
+
<span></span>
|
|
60
|
+
|
|
61
|
+
<span></span>
|
|
62
|
+
|
|
63
|
+
<span></span>
|
|
64
|
+
|
|
65
|
+
</a>
|
|
66
|
+
|
|
59
|
-
<div id="nav
|
|
67
|
+
<div id="gloval-nav">
|
|
68
|
+
|
|
60
|
-
|
|
69
|
+
<nav>
|
|
70
|
+
|
|
71
|
+
<ul>
|
|
72
|
+
|
|
61
|
-
<i
|
|
73
|
+
<li><a href="https://writer-station.com/#overview">▽仕事の概要</a></li>
|
|
62
|
-
|
|
74
|
+
|
|
63
|
-
<i
|
|
75
|
+
<li><a href="https://writer-station.com/#overview">▽案件例</a></li>
|
|
76
|
+
|
|
77
|
+
<li><a href="https://writer-station.com/#overview">▽対象とする人</a></li>
|
|
78
|
+
|
|
79
|
+
<li><a href="https://writer-station.com/#overview">▽サポート体制</a></li>
|
|
80
|
+
|
|
81
|
+
<li><a href="https://writer-station.com/#overview">▽先輩登録者の声</a></li>
|
|
82
|
+
|
|
83
|
+
<li><a href="https://writer-station.com/#overview">▽Q＆A</a></li>
|
|
84
|
+
|
|
85
|
+
<li><a href="https://writer-station.com/#overview">▽ブログ</a></li>
|
|
86
|
+
|
|
87
|
+
<li><a href="https://writer-station.com/#overview">▽ログイン</a></li>
|
|
88
|
+
|
|
89
|
+
<li><a href="https://writer-station.com/#overview">▽登録する</a></li>
|
|
90
|
+
|
|
91
|
+
<li><a href="https://writer-station.com/#overview">▽再チャレンジ</a></li>
|
|
92
|
+
|
|
93
|
+
</ul>
|
|
94
|
+
|
|
95
|
+
</nav>
|
|
64
96
|
|
|
65
97
|
</div>
|
|
66
98
|
|
|
67
|
-
<div id="gloval-nav">
|
|
68
|
-
|
|
69
|
-
<nav>
|
|
70
|
-
|
|
71
|
-
<ul>
|
|
72
|
-
|
|
73
|
-
<li><a href="https://writer-station.com/#overview">▽仕事の概要</a></li>
|
|
74
|
-
|
|
75
|
-
<li><a href="https://writer-station.com/#overview">▽案件例</a></li>
|
|
76
|
-
|
|
77
|
-
<li><a href="https://writer-station.com/#overview">▽対象とする人</a></li>
|
|
78
|
-
|
|
79
|
-
<li><a href="https://writer-station.com/#overview">▽サポート体制</a></li>
|
|
80
|
-
|
|
81
|
-
<li><a href="https://writer-station.com/#overview">▽先輩登録者の声</a></li>
|
|
82
|
-
|
|
83
|
-
<li><a href="https://writer-station.com/#overview">▽Q＆A</a></li>
|
|
84
|
-
|
|
85
|
-
<li><a href="https://writer-station.com/#overview">▽ブログ</a></li>
|
|
86
|
-
|
|
87
|
-
<li><a href="https://writer-station.com/#overview">▽ログイン</a></li>
|
|
88
|
-
|
|
89
|
-
<li><a href="https://writer-station.com/#overview">▽登録する</a></li>
|
|
90
|
-
|
|
91
|
-
<li><a href="https://writer-station.com/#overview">▽再チャレンジ</a></li>
|
|
92
|
-
|
|
93
|
-
</ul>
|
|
94
|
-
|
|
95
|
-
</nav>
|
|
96
|
-
|
|
97
|
-
</div>
|
|
98
|
-
|
|
99
99
|
</div>
|
|
100
100
|
|
|
101
101
|
</header>
|
|
@@ -286,23 +286,47 @@
|
|
|
286
286
|
|
|
287
287
|
<script>
|
|
288
288
|
|
|
289
|
+
if (window.matchMedia( '(min-width: 410px)and(max-width: 740px)' ).matches) {
|
|
290
|
+
|
|
289
|
-
$(function() {
|
|
291
|
+
$(function() {
|
|
290
|
-
|
|
292
|
+
|
|
291
|
-
|
|
293
|
+
$('.nav-button').on('click', function() {
|
|
294
|
+
|
|
292
|
-
|
|
295
|
+
if ($(this).hasClass('active')) {
|
|
296
|
+
|
|
293
|
-
|
|
297
|
+
$(this).removeClass('active');
|
|
298
|
+
|
|
299
|
+
$('#gloval-nav')
|
|
300
|
+
|
|
301
|
+
.addClass('close')
|
|
302
|
+
|
|
303
|
+
.removeClass('open');
|
|
304
|
+
|
|
305
|
+
} else {
|
|
306
|
+
|
|
307
|
+
$(this).addClass('active');
|
|
308
|
+
|
|
309
|
+
$('#gloval-nav')
|
|
310
|
+
|
|
311
|
+
.addClass('open')
|
|
312
|
+
|
|
313
|
+
.removeClass('close');
|
|
314
|
+
|
|
315
|
+
}
|
|
294
316
|
|
|
295
317
|
});
|
|
296
318
|
|
|
297
319
|
});
|
|
298
320
|
|
|
321
|
+
}
|
|
322
|
+
|
|
299
323
|
</script>
|
|
300
324
|
|
|
301
325
|
```
|
|
302
326
|
|
|
303
327
|
### 前提・実現したいこと
|
|
304
328
|
|
|
305
|
-
レスポンシブ対応のためにハンバーガメニューを作っているのですが、
|
|
329
|
+
レスポンシブ対応のためにハンバーガメニューを作っているのですが、gloval-navを表示非表示をしたいにですが、toggleやhideを使っても上手くいきません。
|
|
306
330
|
|
|
307
331
|
まず現時点のjsが機能しません。cssでdislay: none;にしてからjsでshowにしてもダメでした。
|
|
308
332
|
|