[JavaScript]ヘッダー内の各メニューボタンをクリックしたらヘッダーとメニューがアニメーションで閉じて、メインエリアがビューポートいっぱいに広がるようにしたいができないので解決策を知りたいです

JavaScript独学勉強中の者です。
HTMLもCSSも拙いですが、早くもJSに手をつけてしまいました。

タイトルの通りに実装してみたいのですが、なかなかうまくいかず悩んでおります。

[解決したいこと]

各メニューボタンをクリックしたらヘッダーおよびフッターを動的に開閉、メインエリアをビュポートいっぱいに拡大という感じにしたいが、開閉アニメーションがmenu_11をクリックした時にしか反応しないのを解決したい
JSの範囲外かもしれないが、アニメーションでビューポート下部に空白ができてしまうのを解決したい

ひとまずこの2点です。

以下、コード全容です

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5<head>
6  <meta charset="UTF-8">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>TEST TITLE</title>
9  <meta name="description" content="no_comment">
10  <link rel="stylesheet" href="style.css">
11  <script src="script.js" defer></script>
12</head>
13
14<body>
15
16  <header id="header">
17    <span class="site_logo">LOGO</span>
18    <nav class="menu_area">
19      <div>
20        <ul class="menu_up">
21          <li><a href="#">menu_01</a></li>
22          <li><a href="#">menu_02</a></li>
23          <li><a href="#">menu_03</a></li>
24          <li><a href="#">menu_04</a></li>
25          <li><a href="#">menu_05</a></li>
26        </ul>
27      </div>
28      <div>
29        <ul class="menu_under">
30          <li><a href="#">menu_06</a></li>
31          <li><a href="#">menu_07</a></li>
32          <li><a href="#">menu_08</a></li>
33          <li><a href="#">menu_09</a></li>
34          <li><a href="#">menu_10</a></li>
35          <li><a href="#">menu_11</a></li>
36        </ul>
37      </div>
38    </nav>
39  </header>
40
41  <!-- main area start -->
42  <main id="main">
43
44  </main>
45  <!-- main area end -->
46
47  <footer id="footer">
48    <div class="footer_wrap">
49      <small>&copy;2023 Motonari Yoshida</small>
50      <address><a href="#">お問い合わせはこちら</a></address>
51    </div>
52  </footer>
53
54</body>
55
56</html>

CSS
1@charset "utf-8";
2
3/* initial value setting */
4* {
5    box-sizing: border-box;
6}
7
8
9:root {
10    --header-height: 140px;
11    --footer-height: 48px;
12}
13
14html, body {
15    width: 100vw;
16    height: 100vh;
17    margin: 0;
18    padding: 0;
19}
20
21body {
22    display: grid;
23    grid-template-rows: auto 1fr auto;
24}
25
26ul {
27    list-style: none;
28    padding-inline-start: 0;
29}
30
31a {
32    text-decoration: none;
33}
34
35/* header area */
36#header {
37    display: flex;
38    justify-content: space-between;
39    align-items: center;
40}
41
42.site_logo {
43    margin-left: 10px;
44    padding: 20px;
45    border: 1px solid black;
46    border-radius: 50%;
47    font-weight: bold;
48    color: white;
49    background-color: rgb(77, 76, 97);
50}
51
52.menu_up,.menu_under {
53    display: flex;
54    justify-content: flex-end;
55}
56
57.menu_up li a,.menu_under li a {
58    display: block;
59    padding: 10px;
60    margin-right: 10px;
61    border: 1px solid black;
62    border-radius: 5px;
63    font-weight: bold;
64    background-color: rgb(77, 76, 97);
65    color: white;
66
67    /* menu list icon settings */
68    transition-property: background-color;
69    transition-duration: .5s;
70    transition-timing-function: ease;
71}
72
73.menu_up li a:hover,.menu_under li a:hover {
74    background-color: rgb(91, 126, 145)
75}
76
77/* menu list icon */
78.menu_up li a::after,.menu_under li a::after {
79    content: "";
80    width: 8px;
81    height: 8px;
82    border-top: medium solid rgb(204, 126, 177);
83    border-right: medium solid rgb(204, 126, 177);
84    transform: rotate(135deg);
85    margin-left: 10px;
86    display: inline-block;
87
88    transition-property: transform;
89    transition-duration: .5s;
90    transition-timing-function: ease;
91}
92
93.menu_up li a:hover::after,.menu_under li a:hover::after {
94    transform: rotate(45deg);
95} 
96
97
98/* main contents area */
99#main {
100    height: 100%;
101    background-color: blueviolet;
102}
103
104/* footer area */
105.footer_wrap {
106    text-align: center;
107}
108
109address a{
110    font-weight: bold;
111    color: bisque;
112}

JavaScript
1"use strict";
2
3const navElem = document.getElementsByClassName("menu_area")[0];
4const menuElem = navElem.querySelectorAll("A");
5
6const elem = {
7  header: document.getElementById("header"),
8  footer: document.getElementById("footer"),
9};
10
11const height = {
12  header: elem.header.clientHeight,
13  footer: elem.footer.clientHeight,
14};
15
16const keyframe = {
17  header: { height: [`${height.header}px`, "0px"], opacity: [1, 0], visibility: ["visible", "hidden"] },
18  footer: { height: [`${height.footer}px`, "0px"], opacity: [1, 0], visibility: ["visible", "hidden"] },
19};
20const param = { duration: 500, fill: "forwards" };
21
22// Click Animations Class
23class clickAnm {
24  constructor(target, keyframe, param) {
25    this.target = target;
26    this.anm = this.target.animate(keyframe, param);
27    this.anm.pause();
28    this.rate = 1;
29  }
30
31  handleEvent(evt) {
32    this.anm.playbackRate = this.rate;
33    this.anm.play();
34    this.rate === 1
35      ? (elem.footer.style.display = "none")
36      : setTimeout(() => {
37          elem.footer.removeAttribute("style");
38        }, 500);
39    this.rate *= -1;
40  }
41}
42
43// Menu Click Event
44menuElem.forEach((a) => {
45  for (const key in elem) {
46    console.log(key);
47    a.addEventListener("click", new clickAnm(elem[key], keyframe[key], param));
48  }
49});

// Menu Click Event
以降がどうもうまいこといかないなーというところです。
この他にもアドバイスとか効率の良さそうな書き方ありましたら聞いてみたいです。

冗長な文になってしまいましたが、どうかかお力添え頂けたら幸いです。

Lhankor_Mhy

2023/06/07 10:23

試してみましたが、動作するようでした。2つのa要素両方に、それぞれ2つのクリックイベントが設定されていました。

yambejp

2023/06/08 01:18

とりあえずHTMLとCSSも提示してください

行動規範の内容に同意します

回答1件

こうですか？

js
1// Click Animations Class
2class clickAnm {
3    constructor(target, keyframe, param) {
4        this.target = target;
5        this.keyframe = keyframe
6        this.param = param
7        this.rate = 1;
8    }
9
10    handleEvent(evt) {
11        this.anm = this.target.animate(this.keyframe, this.param);
12        this.anm.pause();
13        this.anm.playbackRate = this.rate;
14        this.anm.play();
15        this.rate === 1
16            ? (elem.footer.style.display = "none")
17            : setTimeout(() => {
18                elem.footer.removeAttribute("style");
19            }, 500);
20        this.rate *= -1;
21    }
22}