質問編集履歴
3
誤字訂正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
|
|
195
195
|
などを加えてリサイズ前のクラスを除去する事によって、レスポンシブ化しました。
|
|
196
196
|
|
|
197
|
-
|
|
197
|
+
|
|
198
198
|
|
|
199
199
|
しかし、
|
|
200
200
|
|
2
解決法
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,12 +18,6 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
"マテリアル2"というテーマのハンガーメニュー(サイドバー)はデフォルトではスマホか、PCかの条件分岐しかありませんでした。
|
|
22
|
-
|
|
23
|
-
PCでリサイズしたときも、ハンガーメニューを使いたい(レスポンシブ化したい)と思い、手を加える事にしました。
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
21
|
元のソース:script.js(抜粋)は以下の通りです。
|
|
28
22
|
|
|
29
23
|
```js
|
|
@@ -184,11 +178,7 @@
|
|
|
184
178
|
|
|
185
179
|
```
|
|
186
180
|
|
|
187
|
-
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13140268008
|
|
188
|
-
|
|
189
|
-
|
|
181
|
+
まず、画面サイズを変更した時イベントを取得できるようにしました。
|
|
190
|
-
|
|
191
|
-
|
|
192
182
|
|
|
193
183
|
しかし、リサイズした時、リサイズ前のウィンドウサイズであった時のクラスが残っていたため、リサイズしてもハンガーメニューが上手く動きませんでした。
|
|
194
184
|
|
|
@@ -204,8 +194,6 @@
|
|
|
204
194
|
|
|
205
195
|
などを加えてリサイズ前のクラスを除去する事によって、レスポンシブ化しました。
|
|
206
196
|
|
|
207
|
-
|
|
208
|
-
|
|
209
197
|
---
|
|
210
198
|
|
|
211
199
|
しかし、
|
|
@@ -216,13 +204,7 @@
|
|
|
216
204
|
|
|
217
205
|
|
|
218
206
|
|
|
219
|
-
と`.side_innner`に`position`が追加されてしまい、ハンガーメニューが表示されません。
|
|
207
|
+
と`.side_innner`に`position`が追加されてしまい、ハンガーメニューが表示されません。何故`position`が追加されてしまうのでしょうか?
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
何故`position`が追加されてしまうのでしょうか?
|
|
224
|
-
|
|
225
|
-
|
|
226
208
|
|
|
227
209
|
|
|
228
210
|
|
|
@@ -476,4 +458,42 @@
|
|
|
476
458
|
|
|
477
459
|
```
|
|
478
460
|
|
|
461
|
+
###リサイズ時にスクロール位置を記録してリロードすることで問題を回避
|
|
462
|
+
|
|
463
|
+
|
|
464
|
+
|
|
465
|
+
```javascript
|
|
466
|
+
|
|
467
|
+
jQuery(document).ready(function(){
|
|
468
|
+
|
|
469
|
+
var timer = false;
|
|
470
|
+
|
|
471
|
+
jQuery(window).on("load resize", ReLayout);
|
|
472
|
+
|
|
473
|
+
function ReLayout() { … }
|
|
474
|
+
|
|
475
|
+
if (event.type == 'resize') {
|
|
476
|
+
|
|
477
|
+
if (timer !== false) {
|
|
478
|
+
|
|
479
|
+
clearTimeout(timer);
|
|
480
|
+
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
timer = setTimeout(function() {
|
|
484
|
+
|
|
485
|
+
y = document.documentElement.scrollTop || document.body.scrollTop;
|
|
486
|
+
|
|
487
|
+
location.reload();
|
|
488
|
+
|
|
489
|
+
window.scroll( 0, y);
|
|
490
|
+
|
|
479
|
-
|
|
491
|
+
}, 200);
|
|
492
|
+
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
});
|
|
498
|
+
|
|
499
|
+
```
|
1
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|