質問編集履歴
1
試したことを書き足しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,17 +1,22 @@
|
|
|
1
|
-
##
|
|
1
|
+
## 前提・実現したいこと
|
|
2
|
+
|
|
2
|
-
|
|
3
|
+
メニューボタンを位置固定し、スクロールしたどの位置からでも、全画面メニューが右からスライドインするようなものを設置したいのですが、
|
|
3
4
|
メニューボタンをクリックするとページ全体が最上部に戻されてしまいます。（メニューは正常にスライドされます）
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
初歩的なことかもしれないのですが、
|
|
7
|
+
数時間格闘しましたがさっぱりわかりません…涙
|
|
8
|
+
どなたか分かる方がいたらどうか教えてくださいm(_ _)m
|
|
6
9
|
|
|
10
|
+
## 該当のソースコード
|
|
11
|
+
|
|
7
|
-
|
|
12
|
+
### java script
|
|
8
13
|
<script>
|
|
9
14
|
function navFunc() {
|
|
10
15
|
document.querySelector('html').classList.toggle('open');
|
|
11
16
|
}
|
|
12
17
|
</script>
|
|
13
18
|
|
|
14
|
-
|
|
19
|
+
### HTML
|
|
15
20
|
<header class="header">
|
|
16
21
|
<nav class="nav">
|
|
17
22
|
<ul>
|
|
@@ -23,7 +28,7 @@
|
|
|
23
28
|
<button type="button" class="nav-button" onClick="navFunc()"><span class="sr-only">MENU</span></button>
|
|
24
29
|
</header>
|
|
25
30
|
|
|
26
|
-
|
|
31
|
+
### CSS
|
|
27
32
|
/* ヘッダー */
|
|
28
33
|
.header{
|
|
29
34
|
position: fixed;
|
|
@@ -65,6 +70,7 @@
|
|
|
65
70
|
background: var(--main-color);
|
|
66
71
|
}
|
|
67
72
|
|
|
68
|
-
##
|
|
73
|
+
## 試したこと
|
|
69
74
|
|
|
70
|
-
.navに「position:fixed」を入れたりしてみたが、変わら
|
|
75
|
+
.navに「position:fixed」を入れたりしてみたが、変わらず…
|
|
76
|
+
ボタンを押すとメニューが出ると同時に最上部に飛ばされます（涙）
|