teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ハンバーガーメニューのページ内リンク時にクリックで閉じる

編集履歴

質問編集履歴

1

html、cssの追記をいたしました。

2020/03/12 07:54

投稿

KojiR
KojiR

スコア7

test CHANGED
File without changes
test CHANGED
@@ -24,38 +24,342 @@
24
24
 
25
25
  ハンバーガーメニューが開けなかったりしました。
26
26
 
27
- JS初心者の為、よろしくお願いいたします。
27
+ よろしくお願いいたします。
28
+
29
+
30
+
28
-
31
+ ```html
32
+
29
-
33
+ <div class="hamburger sp_img" id="js-hamburger">
34
+
35
+ <span class="hamburger__line hamburger__line--1"></span>
36
+
37
+ <span class="hamburger__line hamburger__line--2"></span>
38
+
39
+ <span class="hamburger__line hamburger__line--3"></span>
40
+
41
+ </div>
42
+
43
+
44
+
45
+ <div class="black-bg sp_img" id="js-black-bg"></div>
46
+
47
+ <div class="global-nav sp_img">
48
+
49
+ <div class="home"><a href="index.html"><img src="img/xxxxxxxxx.svg" alt="xxxxxxxxx" /></a></div>
50
+
51
+ <div class="navi_red">
52
+
53
+ <h4><a href="day_one.html"><img src="img/xxxxxxxxx.svg" alt="xxxxxxxxx" /></a></h4>
54
+
55
+ <ul>
56
+
57
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
58
+
59
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
60
+
61
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
62
+
63
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
64
+
65
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
66
+
67
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
68
+
69
+ </ul>
70
+
71
+ </div>
72
+
73
+ <div class="navi_org">
74
+
75
+ <h4><a href="day_two.html"><img src="img/xxxxxxxxx.svg" alt="xxxxxxxxx" /></a></h4>
76
+
77
+ <ul>
78
+
79
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
80
+
81
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
82
+
83
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
84
+
85
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
86
+
87
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
88
+
89
+ <li><a href="#xxxxxxxxx">メニュー</a></li>
90
+
91
+ </ul>
92
+
93
+ </div>
94
+
95
+ </div>
30
96
 
31
97
  ```
32
98
 
99
+
100
+
101
+ ```css
102
+
103
+ .global-nav {
104
+
105
+ position: fixed;
106
+
107
+ right: -100%;
108
+
109
+ top: 0;
110
+
111
+ width: 100%;
112
+
113
+ height: 100vh;
114
+
115
+ padding-top: 20px;
116
+
117
+ background-color: #fff;
118
+
119
+ transition: all .5s;
120
+
121
+ z-index: 100000;
122
+
123
+ overflow-y: auto;
124
+
125
+ font-family: sans-serif;
126
+
127
+ }
128
+
129
+ .hamburger {
130
+
131
+ position: fixed;
132
+
133
+ right: 0;
134
+
135
+ top: 0;
136
+
137
+ width: 70px;
138
+
139
+ height: 60px;
140
+
33
- <script>
141
+ cursor: pointer;
142
+
143
+ z-index: 100001;
144
+
145
+ }
146
+
147
+ .global-nav__list {
148
+
149
+ margin: 0;
150
+
151
+ padding: 0;
152
+
153
+ display: block;
154
+
155
+ }
156
+
157
+
158
+
159
+ .hamburger__line {
160
+
161
+ position: absolute;
162
+
163
+ left: 20px;
164
+
165
+ width: 30px;
166
+
167
+ height: 4px;
168
+
169
+ background-color: #bda69f;
170
+
171
+ transition: all .5s;
172
+
173
+ }
174
+
175
+ .hamburger__line--1 {
176
+
177
+ top: 20px;
178
+
179
+ }
180
+
181
+ .hamburger__line--2 {
182
+
183
+ top: 30px;
184
+
185
+ }
186
+
187
+ .hamburger__line--3 {
188
+
189
+ top: 40px;
190
+
191
+ }
192
+
193
+ .black-bg {
194
+
195
+ position: fixed;
196
+
197
+ left: 0;
198
+
199
+ top: 0;
200
+
201
+ width: 100vw;
202
+
203
+ height: 100vh;
204
+
205
+ z-index: 90000;
206
+
207
+ background-color: #fff;
208
+
209
+ opacity: 0;
210
+
211
+ visibility: hidden;
212
+
213
+ transition: all .2s;
214
+
215
+ cursor: pointer;
216
+
217
+ }
218
+
219
+ .nav-open .global-nav {
220
+
221
+ right: 0;
222
+
223
+ }
224
+
225
+ .nav-open .black-bg {
226
+
227
+ opacity: .8;
228
+
229
+ visibility: visible;
230
+
231
+ }
232
+
233
+ .nav-open .hamburger__line--1 {
234
+
235
+ transform: rotate(45deg);
236
+
237
+ top: 30px;
238
+
239
+ }
240
+
241
+ .nav-open .hamburger__line--2 {
242
+
243
+ width: 0;
244
+
245
+ left: 50%;
246
+
247
+ }
248
+
249
+ .nav-open .hamburger__line--3 {
250
+
251
+ transform: rotate(-45deg);
252
+
253
+ top: 30px;
254
+
255
+ }
256
+
257
+ .nav-open .global-nav .home img {
258
+
259
+ margin: 0 0 20px 20px;
260
+
261
+ width: 120px;
262
+
263
+ }
264
+
265
+ .nav-open .global-nav .navi_red {
266
+
267
+ margin: 0 5px 0 20px;
268
+
269
+ padding: 20px 0;
270
+
271
+ width: 43%;
272
+
273
+ display: inline-block;
274
+
275
+ background-color: rgba(220,0,16,1);
276
+
277
+ }
278
+
279
+ .nav-open .global-nav .navi_org {
280
+
281
+ margin-right: 20px;
282
+
283
+ padding: 20px 0;
284
+
285
+ width: 43%;
286
+
287
+ display: inline-block;
288
+
289
+ background-color: rgba(193,138,75,1);
290
+
291
+ }
292
+
293
+ .nav-open .global-nav h4 img {
294
+
295
+ margin: 0 0 10px 20px;
296
+
297
+ width: 100px;
298
+
299
+ }
300
+
301
+ .nav-open .global-nav ul {
302
+
303
+ margin: 0 20px;
304
+
305
+ }
306
+
307
+ .nav-open .global-nav ul li a {
308
+
309
+ padding: 0 0 0 30px;
310
+
311
+ color: #fff;
312
+
313
+ font-size: 18px;
314
+
315
+ font-weight: bold;
316
+
317
+ line-height: 42px;
318
+
319
+ text-decoration: none;
320
+
321
+ background: url(../img/icon_link.svg) center left no-repeat;
322
+
323
+ background-size: 18px;
324
+
325
+ }
326
+
327
+ .nav-open .global-nav ul li a:hover {
328
+
329
+ color: #fff;
330
+
331
+ text-decoration: underline;
332
+
333
+ }
334
+
335
+ ```
336
+
337
+
338
+
339
+ ```javascript
34
340
 
35
341
  function toggleNav() {
36
342
 
37
- var body = document.body;
343
+ var body = document.body;
38
-
344
+
39
- var hamburger = document.getElementById('js-hamburger');
345
+ var hamburger = document.getElementById('js-hamburger');
40
-
346
+
41
- var blackBg = document.getElementById('js-black-bg');
347
+ var blackBg = document.getElementById('js-black-bg');
42
-
348
+
43
- hamburger.addEventListener('click', function() {
349
+ hamburger.addEventListener('click', function() {
44
-
350
+
45
- body.classList.toggle('nav-open');
351
+ body.classList.toggle('nav-open');
46
-
352
+
47
- });
353
+ });
48
-
354
+
49
- blackBg.addEventListener('click', function() {
355
+ blackBg.addEventListener('click', function() {
50
-
356
+
51
- body.classList.remove('nav-open');
357
+ body.classList.remove('nav-open');
52
-
358
+
53
- });
359
+ });
54
360
 
55
361
  }
56
362
 
57
363
  toggleNav();
58
364
 
59
- </script>
60
-
61
365
  ```