質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

261閲覧

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

mokutaro

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2023/06/07 10:00

編集2023/06/08 14:29

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
以降がどうもうまいこといかないなーというところです。
この他にもアドバイスとか効率の良さそうな書き方ありましたら聞いてみたいです。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2023/06/07 10:23

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

2023/06/08 01:18

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

回答1

0

こうですか?

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}

個人的には、ある要素の状態管理を複数のオブジェクトでするのは混乱の原因になると思います。(たとえば、headerのrateがクリックするメニューごとのclickAnmのインスタンスに管理されているので、それぞれ違う状態になりうる)

投稿2023/06/09 01:33

Lhankor_Mhy

総合スコア36254

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問