teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問モーダルウィンドウを閉じたら、上に戻ってしまうのを止めたい。

編集履歴

質問編集履歴

1

コード分けや、cssの追記等、より詳しく書きました。本文だけでもテスト出来ます。

2021/03/26 11:59

投稿

oda-r
oda-r

スコア1

test CHANGED
File without changes
test CHANGED
@@ -14,32 +14,14 @@
14
14
 
15
15
 
16
16
 
17
+ HTML部分
18
+
17
- ```ここに言語名を入力
19
+ ```
18
20
 
19
21
 
20
22
 
21
23
  <div id="header">
22
24
 
23
- <a href="index.html"><img id="headerimage" src="images/logo-black.png"></a>
24
-
25
-
26
-
27
- <ul id="sp-menu">
28
-
29
- <li><img src="×××.png">○○○<a href="♯"></a></li>
30
-
31
- <li><img src="×××.png">○○○<a href="♯"></a></li>
32
-
33
- <li><img src="×××.png">○○○<a href="♯"></a></li>
34
-
35
- <li><img src="×××.png">○○○<a href="♯"></a></li>
36
-
37
- <li class="last"></li>
38
-
39
- </ul>
40
-
41
-
42
-
43
25
  <div class="hamburger-back"></div>
44
26
 
45
27
  <div class="hamburger">
@@ -60,9 +42,7 @@
60
42
 
61
43
  <tr>
62
44
 
63
- <td><a href="♯">○○○</span></a></td>
45
+ <td colspan="2"><a href="♯">○○○</span></a></td>
64
-
65
- <td><a href="♯">○○○</span></a></td>
66
46
 
67
47
  </tr>
68
48
 
@@ -76,43 +56,357 @@
76
56
 
77
57
  <tr>
78
58
 
79
- <td colspan="2"><a href="♯">一部省略</span></a></td>
59
+ <td><a href="♯">○○○</span></a></td>
60
+
61
+ <td><a href="♯">○○○</span></a></td>
80
62
 
81
63
  </tr>
82
64
 
65
+ <tr>
66
+
67
+ <td><a href="♯">○○○</span></a></td>
68
+
69
+ <td><a href="♯">○○○</span></a></td>
70
+
71
+ </tr>
72
+
83
73
  </table>
84
74
 
85
- <div id="otherlink">
75
+
86
-
87
- <ul>
76
+
88
-
89
- <li><a href="♯">○○○</a></li>
90
-
91
- <li><a href="♯">○○○</a></li>
92
-
93
- <li><a href="♯">○○○</a></li>
94
-
95
- </ul>
77
+ </nav>
96
78
 
97
79
  </div>
98
80
 
99
- </nav>
100
-
101
- </div>
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
- ----------------------------------------------------------------------------------
110
-
111
-
112
-
113
-
114
-
115
-
81
+
82
+
83
+ ```
84
+
85
+ css部分
86
+
87
+
88
+
89
+ ```
90
+
91
+ /*　ハンバーガーボタン　*/
92
+
93
+
94
+
95
+ .hamburger-back{
96
+
97
+ background: #fff;
98
+
99
+ display: block;
100
+
101
+ position: fixed;
102
+
103
+ top: 0;
104
+
105
+ right: 0;
106
+
107
+ width: 55px;
108
+
109
+ height: 53px;
110
+
111
+ z-index: 14;
112
+
113
+ }
114
+
115
+
116
+
117
+
118
+
119
+ .hamburger {
120
+
121
+ display : block;
122
+
123
+ position: fixed;
124
+
125
+ z-index : 100;
126
+
127
+ right : 6px;
128
+
129
+ top : 6px;
130
+
131
+ width : 42px;
132
+
133
+ height: 42px;
134
+
135
+ cursor: pointer;
136
+
137
+ text-align: center;
138
+
139
+ }
140
+
141
+
142
+
143
+ .hamburger span {
144
+
145
+ display : block;
146
+
147
+ position: absolute;
148
+
149
+ width : 30px;
150
+
151
+ height : 1px ;
152
+
153
+ left : 6px;
154
+
155
+ background : #191919;
156
+
157
+ -webkit-transition: 0.3s ease-in-out;
158
+
159
+ -moz-transition : 0.3s ease-in-out;
160
+
161
+ transition : 0.3s ease-in-out;
162
+
163
+ }
164
+
165
+ .hamburger span:nth-child(1) {
166
+
167
+ top: 10px;
168
+
169
+ }
170
+
171
+ .hamburger span:nth-child(2) {
172
+
173
+ top: 20px;
174
+
175
+ }
176
+
177
+ .hamburger span:nth-child(3) {
178
+
179
+ top: 30px;
180
+
181
+ }
182
+
183
+
184
+
185
+ /* ナビ開いてる時のボタン */
186
+
187
+ .hamburger.active {
188
+
189
+ -webkit-transition: all 0.3s ease-in-out;
190
+
191
+ -o-transition : all 0.3s ease-in-out;
192
+
193
+ transition : all 0.3s ease-in-out;
194
+
195
+ -webkit-transition-delay: 0.6s;
196
+
197
+ -o-transition-delay : 0.6s;
198
+
199
+ transition-delay : 0.6s;
200
+
201
+ -webkit-transform: rotate(45deg);
202
+
203
+ -ms-transform : rotate(45deg);
204
+
205
+ -o-transform : rotate(45deg);
206
+
207
+ transform : rotate(45deg);
208
+
209
+ }
210
+
211
+ .hamburger.active span:nth-child(2){
212
+
213
+ width: 0px;
214
+
215
+ }
216
+
217
+ .hamburger.active span:nth-child(1),
218
+
219
+ .hamburger.active span:nth-child(3){
220
+
221
+ background :#191919;
222
+
223
+ -webkit-transition-delay: 0.3s;
224
+
225
+ -o-transition-delay: 0.3s;
226
+
227
+ transition-delay: 0.3s;
228
+
229
+ }
230
+
231
+ .hamburger.active span:nth-child(1){
232
+
233
+ -webkit-transform: translateY(4px);
234
+
235
+ -ms-transform : translateY(4px);
236
+
237
+ -o-transform : translateY(4px);
238
+
239
+ transform : translateY(4px);
240
+
241
+ }
242
+
243
+
244
+
245
+ .hamburger.active span:nth-child(3){
246
+
247
+ -webkit-transform: translateY(-16px) rotate(90deg);
248
+
249
+ -ms-transform: translateY(-16px) rotate(90deg);
250
+
251
+ -o-transform : translateY(-16px) rotate(90deg);
252
+
253
+ transform : translateY(-16px) rotate(90deg);
254
+
255
+ }
256
+
257
+
258
+
259
+
260
+
261
+ .globalMenuSp {
262
+
263
+ position: fixed;
264
+
265
+ z-index : 90;
266
+
267
+ top : 0;
268
+
269
+ right: 0;
270
+
271
+ background:#f7f7f7;
272
+
273
+ text-align: center;
274
+
275
+ width: 100%;
276
+
277
+ height: 100%;
278
+
279
+ opacity: 0;
280
+
281
+ transition: opacity .6s ease, visibility .6s ease;
282
+
283
+ font-size: 15px;
284
+
285
+ pointer-events: none;
286
+
287
+ }
288
+
289
+
290
+
291
+ .globalMenuSp table {
292
+
293
+ border-collapse: collapse;
294
+
295
+ border-spacing: 0;
296
+
297
+ width: 100%;
298
+
299
+
300
+
301
+ }
302
+
303
+
304
+
305
+ .globalMenuSp table th,td {
306
+
307
+ border: solid 1px #e0e0e0;
308
+
309
+ }
310
+
311
+
312
+
313
+
314
+
315
+
316
+
317
+ .globalMenuSp table td{
318
+
319
+ background: -webkit-linear-gradient(-45deg, #ffa3ff, #50f2ed);
320
+
321
+ -webkit-background-clip: text;
322
+
323
+ -webkit-text-fill-color:transparent;
324
+
325
+ font-family: 'Poiret One', cursive;
326
+
327
+ font-weight: 600;
328
+
329
+ font-size: 20px;
330
+
331
+ }
332
+
333
+
334
+
335
+ .globalMenuSp a {
336
+
337
+ display: block;
338
+
339
+ padding: 8px 0;
340
+
341
+ text-decoration :none;
342
+
343
+ }
344
+
345
+
346
+
347
+ .globalMenuSp span{
348
+
349
+ display: block;
350
+
351
+ font-size: 11px;
352
+
353
+ background: #a3a3a3;
354
+
355
+ -webkit-background-clip: text;
356
+
357
+ -webkit-text-fill-color:transparent;
358
+
359
+ font-weight: normal;
360
+
361
+ }
362
+
363
+
364
+
365
+
366
+
367
+ /* このクラスを、jQueryで付与・削除する */
368
+
369
+ .globalMenuSp.active {
370
+
371
+ opacity: 100;
372
+
373
+ pointer-events: auto;
374
+
375
+ }
376
+
377
+
378
+
379
+
380
+
381
+ body.fixed {
382
+
383
+ position: fixed;
384
+
385
+ width: 100%;
386
+
387
+ height: 100%;
388
+
389
+ left: 0;
390
+
391
+ }
392
+
393
+ ```js部分
394
+
395
+
396
+
397
+ ``````
398
+
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
406
+
407
+ <script type="text/javascript">
408
+
409
+
116
410
 
117
411
  $(function() {
118
412
 
@@ -172,7 +466,7 @@
172
466
 
173
467
  });
174
468
 
175
-
469
+ </script>
176
470
 
177
471
 
178
472