teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問スムーススクロールとハンバーガーメニュー内リンクをクリックで閉じる

編集履歴

質問編集履歴

6

JSの分割

2019/11/29 02:09

投稿

kasidai
kasidai

スコア5

test CHANGED
File without changes
test CHANGED
@@ -22,6 +22,10 @@
22
22
 
23
23
  ```html
24
24
 
25
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>//jQueryのバージョン
26
+
27
+
28
+
25
29
  <div class="hamburger">
26
30
 
27
31
  <div class="Toggle">
@@ -296,9 +300,9 @@
296
300
 
297
301
 
298
302
 
299
- ```Javascript
303
+ ```javascript
300
-
304
+
301
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>//jQueryのバージョン
305
+ //hambuger.js
302
306
 
303
307
 
304
308
 
@@ -320,66 +324,52 @@
320
324
 
321
325
  }
322
326
 
323
-
324
-
325
- $('#nav a').on('click', function() {
326
-
327
- $('#nav').toggleClass('active');
328
-
329
- $(".Toggle").toggleClass('active');
330
-
331
- })
332
-
333
-
334
-
335
327
  });
336
328
 
337
329
  });
338
330
 
331
+
332
+
333
+
334
+
335
+ ```
336
+
337
+
338
+
339
+ ```javascript
340
+
341
+
342
+
339
- //Hamburger
343
+ //scroll.js
340
-
341
-
342
-
343
-
344
-
344
+
345
+
346
+
345
- $(function(){
347
+ $(function () {
346
-
347
-
348
348
 
349
349
  $('a[href^=#]').click(function() {
350
350
 
351
-
352
-
353
- var speed = 400;
351
+ var speed = 400;
354
-
355
-
356
352
 
357
353
  var href= $(this).attr("href");
358
354
 
359
-
360
-
361
355
  var target = $(href == "#" || href == "" ? 'html' : href);
362
356
 
363
-
364
-
365
357
  var position = target.offset().top;
366
358
 
367
-
368
-
369
359
  $('body,html').animate({scrollTop:position}, speed, 'swing');
370
360
 
361
+ $('.NavMenu').removeClass('open');
362
+
363
+ $('.NavMenu').removeClass('active');
364
+
365
+ $(".Toggle").removeClass('active');
366
+
371
367
  return false;
372
368
 
373
369
  });
374
370
 
375
371
  });
376
372
 
377
- //scroll
378
-
379
-
380
-
381
-
382
-
383
373
  ```
384
374
 
385
375
 

5

Hamburger.cssの追加

2019/11/29 02:09

投稿

kasidai
kasidai

スコア5

test CHANGED
File without changes
test CHANGED
@@ -174,6 +174,124 @@
174
174
 
175
175
  }
176
176
 
177
+ //scroll.css
178
+
179
+
180
+
181
+
182
+
183
+ nav.NavMenu {
184
+
185
+ position: fixed; /*表示位置を固定*/
186
+
187
+ z-index: 2; /*重ね順を変更*/
188
+
189
+ top: 0; /*表示位置を指定*/
190
+
191
+ left: 0; /*表示位置を指定*/
192
+
193
+ background: transparent; /*背景を透明にする*/
194
+
195
+ color: #000; /*文字色を白にする*/
196
+
197
+ text-align: center; /*テキストを中央揃え*/
198
+
199
+ width: 100%; /*全幅表示*/
200
+
201
+ transform: translateY(-100%); /*ナビを上に隠す*/
202
+
203
+ transition: all 0.6s; /*アニメーションの時間を指定*/
204
+
205
+
206
+
207
+
208
+
209
+ }
210
+
211
+
212
+
213
+ .open.NavMenu {
214
+
215
+ top: 60px;
216
+
217
+
218
+
219
+ }
220
+
221
+
222
+
223
+ nav.NavMenu ul {
224
+
225
+ background: #ccc; /*背景をグレーにする*/
226
+
227
+ width: 100%;
228
+
229
+ margin: 0 auto;
230
+
231
+ padding: 0;
232
+
233
+ height: 100vh;
234
+
235
+ display: flex;
236
+
237
+ flex-direction: column;
238
+
239
+ background-color: rgba(0, 0, 0, 0.9);
240
+
241
+
242
+
243
+ }
244
+
245
+
246
+
247
+ nav.NavMenu ul li {
248
+
249
+ font-size: 1.1em;
250
+
251
+ list-style-type: none;
252
+
253
+ padding: 0;
254
+
255
+ width: 100%;
256
+
257
+
258
+
259
+ }
260
+
261
+
262
+
263
+ nav.NavMenu ul li:last-child {
264
+
265
+ padding-bottom: 0;
266
+
267
+ border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
268
+
269
+ }
270
+
271
+
272
+
273
+ nav.NavMenu ul li a {
274
+
275
+ display: block; /*クリックできる領域を広げる*/
276
+
277
+ color: #ffffff;
278
+
279
+ padding: 1em 0;
280
+
281
+ text-decoration: none;
282
+
283
+ }
284
+
285
+
286
+
287
+ nav.NavMenu.active {
288
+
289
+ transform: translateY(0%);
290
+
291
+ }
292
+
293
+ //Hamburger.css
294
+
177
295
  ```
178
296
 
179
297
 

4

CSSの追記

2019/11/28 22:31

投稿

kasidai
kasidai

スコア5

test CHANGED
File without changes
test CHANGED
@@ -68,6 +68,116 @@
68
68
 
69
69
  ```
70
70
 
71
+ ```CSS
72
+
73
+ .Toggle {
74
+
75
+ /* display: inline-block; */
76
+
77
+ position: relative;
78
+
79
+ /* right: 13px; */
80
+
81
+ /* top: 12px; */
82
+
83
+ width: 40px;
84
+
85
+ height: 40px;
86
+
87
+ cursor: pointer;
88
+
89
+ z-index: 3;
90
+
91
+ /* text-align: right; */
92
+
93
+ }
94
+
95
+
96
+
97
+ .Toggle span {
98
+
99
+ display: block;
100
+
101
+ position: absolute;
102
+
103
+ width: 30px;
104
+
105
+ border-bottom: solid 5px #ff8c00;
106
+
107
+ -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
108
+
109
+ -moz-transition: .35s ease-in-out; /*変化の速度を指定*/
110
+
111
+ transition: .35s ease-in-out; /*変化の速度を指定*/
112
+
113
+ left: 6px;
114
+
115
+ }
116
+
117
+
118
+
119
+ .Toggle span:nth-child(1) {
120
+
121
+ top: 9px;
122
+
123
+ }
124
+
125
+
126
+
127
+ .Toggle span:nth-child(2) {
128
+
129
+ top: 18px;
130
+
131
+ }
132
+
133
+
134
+
135
+ .Toggle span:nth-child(3) {
136
+
137
+ top: 27px;
138
+
139
+ }
140
+
141
+
142
+
143
+
144
+
145
+ .Toggle.active span:nth-child(1) {
146
+
147
+ top: 18px;
148
+
149
+ left: 6px;
150
+
151
+ -webkit-transform: rotate(-45deg);
152
+
153
+ -moz-transform: rotate(-45deg);
154
+
155
+ transform: rotate(-45deg);
156
+
157
+ }
158
+
159
+
160
+
161
+
162
+
163
+ .Toggle.active span:nth-child(2),
164
+
165
+ .Toggle.active span:nth-child(3) {
166
+
167
+ top: 18px;
168
+
169
+ -webkit-transform: rotate(45deg);
170
+
171
+ -moz-transform: rotate(45deg);
172
+
173
+ transform: rotate(45deg);
174
+
175
+ }
176
+
177
+ ```
178
+
179
+
180
+
71
181
  ```Javascript
72
182
 
73
183
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>//jQueryのバージョン

3

書式の改善

2019/11/28 06:40

投稿

kasidai
kasidai

スコア5

test CHANGED
File without changes
test CHANGED
@@ -70,7 +70,7 @@
70
70
 
71
71
  ```Javascript
72
72
 
73
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
73
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>//jQueryのバージョン
74
74
 
75
75
 
76
76
 

2

jQueryのバージョンを記述

2019/11/28 05:02

投稿

kasidai
kasidai

スコア5

test CHANGED
File without changes
test CHANGED
@@ -70,7 +70,7 @@
70
70
 
71
71
  ```Javascript
72
72
 
73
-
73
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
74
74
 
75
75
 
76
76
 

1

div抜け等の修正

2019/11/28 05:01

投稿

kasidai
kasidai

スコア5

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  ```html
24
24
 
25
- div class="hamburger">
25
+ <div class="hamburger">
26
26
 
27
27
  <div class="Toggle">
28
28
 
@@ -108,7 +108,7 @@
108
108
 
109
109
  });
110
110
 
111
- <!--Hamburger -->
111
+ //Hamburger
112
112
 
113
113
 
114
114
 
@@ -146,7 +146,7 @@
146
146
 
147
147
  });
148
148
 
149
- <!-- scroll -->
149
+ //scroll
150
150
 
151
151
 
152
152