teratail
回答率
85.40%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップJavaScriptに関する質問[JavaScript]ヘッダー内の各メニューボタンをクリックしたらヘッダーとメニューがアニメーションで閉じて、メインエリアがビューポートいっぱいに広がるようにしたいができないので解決策を知りたいです

編集履歴

質問編集履歴

3

全文修正しました。

2023/06/08 14:29

投稿

mokutaro
mokutaro

スコア1

test CHANGED
@@ -1 +1 @@
1
- [JavaScript]クラスをインスタンス化する際に、動的な引数を渡したい
1
+ [JavaScript]ヘッダー内の各メニューボタンをクリックしたらヘッダーとメニューがアニメーションで閉じて、メインエリアがビューポートいっぱいに広がるようにしたいができないので解決策を知りたいです
test CHANGED
@@ -1,14 +1,199 @@
1
- JS初学者です。
1
+ JavaScript独学勉強中の者です。
2
- 以下の画像のイメージでHTMLとCSSを記述しました。
2
+ HTMLもCSSも拙いですが、早くもJSに手をつけてしまいました。
3
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-06-07/1a19a6a2-9a88-43a3-af91-bb1f0f7714be.png)
3
+
4
-
5
- これより
6
- ヘッダー内の各menuボタンをクリックすると、ヘッダーエリア及びフッターエリアが閉じて、代わりにメインエリアがビューポートいっぱいに
7
- 広がる仕様にしたいと思いJSを書いたのが以下になります。
4
+ タイトルの通りに実装してみたいのですが、なかなかうまくいかず悩んでおります。
5
+
6
+ ---
7
+
8
+ [解決したいこと]
9
+ - 各メニューボタンをクリックしたらヘッダーおよびフッターを動的に開閉、メインエリアをビュポートいっぱいに拡大という感じにしたいが、開閉アニメーションがmenu_11をクリックした時にしか反応しないのを解決したい
10
+
11
+ - JSの範囲外かもしれないが、アニメーションでビューポート下部に空白ができてしまうのを解決したい
12
+
13
+ ひとまずこの2点です。
14
+
15
+ ---
16
+ 以下、コード全容です
17
+
18
+ ```html
19
+ <!DOCTYPE html>
20
+
21
+ <html lang="ja">
22
+
23
+ <head>
24
+ <meta charset="UTF-8">
25
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
26
+ <title>TEST TITLE</title>
27
+ <meta name="description" content="no_comment">
28
+ <link rel="stylesheet" href="style.css">
29
+ <script src="script.js" defer></script>
30
+ </head>
31
+
32
+ <body>
33
+
34
+ <header id="header">
35
+ <span class="site_logo">LOGO</span>
36
+ <nav class="menu_area">
37
+ <div>
38
+ <ul class="menu_up">
39
+ <li><a href="#">menu_01</a></li>
40
+ <li><a href="#">menu_02</a></li>
41
+ <li><a href="#">menu_03</a></li>
42
+ <li><a href="#">menu_04</a></li>
43
+ <li><a href="#">menu_05</a></li>
44
+ </ul>
45
+ </div>
46
+ <div>
47
+ <ul class="menu_under">
48
+ <li><a href="#">menu_06</a></li>
49
+ <li><a href="#">menu_07</a></li>
50
+ <li><a href="#">menu_08</a></li>
51
+ <li><a href="#">menu_09</a></li>
52
+ <li><a href="#">menu_10</a></li>
53
+ <li><a href="#">menu_11</a></li>
54
+ </ul>
55
+ </div>
56
+ </nav>
57
+ </header>
58
+
59
+ <!-- main area start -->
60
+ <main id="main">
61
+
62
+ </main>
63
+ <!-- main area end -->
64
+
65
+ <footer id="footer">
66
+ <div class="footer_wrap">
67
+ <small>&copy;2023 Motonari Yoshida</small>
68
+ <address><a href="#">お問い合わせはこちら</a></address>
69
+ </div>
70
+ </footer>
71
+
72
+ </body>
73
+
74
+ </html>
75
+ ```
76
+
77
+ ```CSS
78
+ @charset "utf-8";
79
+
80
+ /* initial value setting */
81
+ * {
82
+ box-sizing: border-box;
83
+ }
84
+
85
+
86
+ :root {
87
+ --header-height: 140px;
88
+ --footer-height: 48px;
89
+ }
90
+
91
+ html, body {
92
+ width: 100vw;
93
+ height: 100vh;
94
+ margin: 0;
95
+ padding: 0;
96
+ }
97
+
98
+ body {
99
+ display: grid;
100
+ grid-template-rows: auto 1fr auto;
101
+ }
102
+
103
+ ul {
104
+ list-style: none;
105
+ padding-inline-start: 0;
106
+ }
107
+
108
+ a {
109
+ text-decoration: none;
110
+ }
111
+
112
+ /* header area */
113
+ #header {
114
+ display: flex;
115
+ justify-content: space-between;
116
+ align-items: center;
117
+ }
118
+
119
+ .site_logo {
120
+ margin-left: 10px;
121
+ padding: 20px;
122
+ border: 1px solid black;
123
+ border-radius: 50%;
124
+ font-weight: bold;
125
+ color: white;
126
+ background-color: rgb(77, 76, 97);
127
+ }
128
+
129
+ .menu_up,.menu_under {
130
+ display: flex;
131
+ justify-content: flex-end;
132
+ }
133
+
134
+ .menu_up li a,.menu_under li a {
135
+ display: block;
136
+ padding: 10px;
137
+ margin-right: 10px;
138
+ border: 1px solid black;
139
+ border-radius: 5px;
140
+ font-weight: bold;
141
+ background-color: rgb(77, 76, 97);
142
+ color: white;
143
+
144
+ /* menu list icon settings */
145
+ transition-property: background-color;
146
+ transition-duration: .5s;
147
+ transition-timing-function: ease;
148
+ }
149
+
150
+ .menu_up li a:hover,.menu_under li a:hover {
151
+ background-color: rgb(91, 126, 145)
152
+ }
153
+
154
+ /* menu list icon */
155
+ .menu_up li a::after,.menu_under li a::after {
156
+ content: "";
157
+ width: 8px;
158
+ height: 8px;
159
+ border-top: medium solid rgb(204, 126, 177);
160
+ border-right: medium solid rgb(204, 126, 177);
161
+ transform: rotate(135deg);
162
+ margin-left: 10px;
163
+ display: inline-block;
164
+
165
+ transition-property: transform;
166
+ transition-duration: .5s;
167
+ transition-timing-function: ease;
168
+ }
169
+
170
+ .menu_up li a:hover::after,.menu_under li a:hover::after {
171
+ transform: rotate(45deg);
172
+ }
173
+
174
+
175
+ /* main contents area */
176
+ #main {
177
+ height: 100%;
178
+ background-color: blueviolet;
179
+ }
180
+
181
+ /* footer area */
182
+ .footer_wrap {
183
+ text-align: center;
184
+ }
185
+
186
+ address a{
187
+ font-weight: bold;
188
+ color: bisque;
189
+ }
190
+ ```
8
191
 
9
192
  ```JavaScript
10
- // ヘッダーメニューを配列風で取得
193
+ "use strict";
194
+
195
+ const navElem = document.getElementsByClassName("menu_area")[0];
11
- const menuElem = Document.querySelectorAll("#header A");
196
+ const menuElem = navElem.querySelectorAll("A");
12
197
 
13
198
  const elem = {
14
199
  header: document.getElementById("header"),
@@ -32,35 +217,32 @@
32
217
  this.target = target;
33
218
  this.anm = this.target.animate(keyframe, param);
34
219
  this.anm.pause();
35
- this.duration = param.duration;
36
220
  this.rate = 1;
37
221
  }
38
222
 
39
223
  handleEvent(evt) {
40
224
  this.anm.playbackRate = this.rate;
41
225
  this.anm.play();
226
+ this.rate === 1
227
+ ? (elem.footer.style.display = "none")
228
+ : setTimeout(() => {
229
+ elem.footer.removeAttribute("style");
230
+ }, 500);
42
231
  this.rate *= -1;
43
232
  }
44
233
  }
45
234
 
46
235
  // Menu Click Event
47
236
  menuElem.forEach((a) => {
237
+ for (const key in elem) {
48
- Object.keys(elem).forEach((key) => {
238
+ console.log(key);
49
239
  a.addEventListener("click", new clickAnm(elem[key], keyframe[key], param));
50
- });
240
+ }
51
241
  });
52
242
  ```
53
243
 
54
- この中の「// Menu Click Event」の部分でかなり悩んでおり、このコードですと
244
+ // Menu Click Event
55
- 最後のメニュー「menu_8」をクリックしたときしか、ヘッダーフッターの開閉およびメニューの拡大が発生しない
56
- ということが起きてしまいます。
245
+ 以降がどうもうまいこといかないなーというところです。
57
-
58
- 自分で調べたり試したりしても同じようにしかならず質問に至りました。
59
-
60
- 各メニューボタンでアニメーションをうまく動かすためにはどうしたらよいでしょうか？
61
- ご教授いただけますと幸いです。
62
-
63
- メインエリアに関しては、CSSでheight: 100%;にしてあります。
246
+ この他にもアドバイスとか効率の良さそうな書き方ありましたら聞いてみたいです。
247
+
64
- また、bodyに対してdisplay: grid;指定のgrid-template-rows:auto 1fr auto;で3分割にしてあります。
248
+ 冗長な文になってしまいましたが、どうかかお力添え頂けたら幸いです。
65
-
66
-
JavaScript

2

追記

2023/06/07 12:18

投稿

mokutaro
mokutaro

スコア1

test CHANGED
File without changes
test CHANGED
@@ -60,4 +60,7 @@
60
60
  各メニューボタンでアニメーションをうまく動かすためにはどうしたらよいでしょうか？
61
61
  ご教授いただけますと幸いです。
62
62
 
63
+ メインエリアに関しては、CSSでheight: 100%;にしてあります。
64
+ また、bodyに対してdisplay: grid;指定のgrid-template-rows:auto 1fr auto;で3分割にしてあります。
63
65
 
66
+
JavaScript

1

質問内容を刷新いたしました。

2023/06/07 12:12

投稿

mokutaro
mokutaro

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,46 +1,63 @@
1
1
  JS初学者です。
2
+ 以下の画像のイメージでHTMLとCSSを記述しました。
3
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-06-07/1a19a6a2-9a88-43a3-af91-bb1f0f7714be.png)
4
+
5
+ これより
6
+ ヘッダー内の各menuボタンをクリックすると、ヘッダーエリア及びフッターエリアが閉じて、代わりにメインエリアがビューポートいっぱいに
7
+ 広がる仕様にしたいと思いJSを書いたのが以下になります。
2
8
 
3
9
  ```JavaScript
4
- // ヘッダーに配置された複数のメニューボタンを取得する
10
+ // ヘッダーメニューを配列風で取得
5
- const navElem = document.getElementsByClassName("menu_area")[0];
6
- const menuElem = navElem.querySelectorAll("A");
11
+ const menuElem = Document.querySelectorAll("#header A");
7
12
 
8
13
  const elem = {
9
14
  header: document.getElementById("header"),
10
15
  footer: document.getElementById("footer"),
11
16
  };
12
17
 
13
- const param = { ~};
18
+ const height = {
19
+ header: elem.header.clientHeight,
20
+ footer: elem.footer.clientHeight,
21
+ };
14
22
 
23
+ const keyframe = {
24
+ header: { height: [`${height.header}px`, "0px"], opacity: [1, 0], visibility: ["visible", "hidden"] },
25
+ footer: { height: [`${height.footer}px`, "0px"], opacity: [1, 0], visibility: ["visible", "hidden"] },
26
+ };
27
+ const param = { duration: 500, fill: "forwards" };
28
+
29
+ // Click Animations Class
15
30
  class clickAnm {
16
- constructor(target, keyframe, param) {~}
31
+ constructor(target, keyframe, param) {
32
+ this.target = target;
33
+ this.anm = this.target.animate(keyframe, param);
34
+ this.anm.pause();
35
+ this.duration = param.duration;
36
+ this.rate = 1;
37
+ }
38
+
39
+ handleEvent(evt) {
40
+ this.anm.playbackRate = this.rate;
41
+ this.anm.play();
42
+ this.rate *= -1;
43
+ }
17
44
  }
18
45
 
19
- // メニューボタンをクリックした後にコンストラクタにelemオブジェクトの二つの値を同時に渡したい
46
+ // Menu Click Event
20
47
  menuElem.forEach((a) => {
48
+ Object.keys(elem).forEach((key) => {
21
- a.addEventListener("click", new clickAnm(elem[key], keyframe[key], param));
49
+ a.addEventListener("click", new clickAnm(elem[key], keyframe[key], param));
50
+ });
22
51
  });
23
52
  ```
24
53
 
25
- イベントリスナーの第2引数である、new clickAnm(elem[key], keyframe[key], paramの部分で[key]にelemオブジェクトのプロパティを2つとも渡したいです。
54
+ この中の「// Menu Click Event」の部分でかなり悩んでおり、このコードですと
55
+ 最後のメニュー「menu_8」をクリックしたときしか、ヘッダーフッターの開閉およびメニューの拡大が発生しない
26
- 以下のコードは試したものです。
56
+ ということが起きてしまいます。
27
57
 
28
- ```JavaScript
29
- menuElem.forEach((a) => {
58
+ 自分で調べたり試したりしても同じようにしかならず質問に至りました。
30
- Object.keys(elem).forEach((key) => a.addEventListener("click", new clickAnm(elem[key], keyframe[key], param)));
31
- });
32
- ```
33
59
 
60
+ 各メニューボタンでアニメーションをうまく動かすためにはどうしたらよいでしょうか？
34
- ```JavaScript
61
+ ご教授いただけますと幸いです。
35
- menuElem.forEach((a) => {
36
- for (const key in elem) {
37
- a.addEventListener("click", new clickAnm(elem[key], keyframe[key], param));
38
- }
39
- });
40
- ```
41
62
 
42
- 両方ともelemオブジェクトのプロパティを二つ取得して動作するにはするのですが、
43
- メニューが一つだけしか(一番最後のメニューのみ)反応しません・・・。
44
- どのメニューをクリックしても同じように動作してほしいのですが、自分の知識とか理解ではできず・・・どうかご教授いただけると幸いです！
45
63
 
46
- 分かりずらい内容で申し訳ないですがよろしくお願いいたします。
JavaScript