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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3549閲覧

JavaScript ハンバーガーメニューの表示が消えたまま再表示されない

Kiyobun510

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/03/06 16:54

編集2020/03/06 18:59

今HPでハンバーガーメニューの実装をしているのですがうまくいきません。
JQueryはまだ勉強していないのでJavaScriptで実装しようとしています。
JavaScriptはProGateでやっただけで知識も理解も不足しているのですが、メニューの表示までは何とか形になりました。
メニューボタンをクリックすると関数toggleNavが実行されhamburger-menuクラスにactiveクラスが追加されることでメニューを表示するようにコードを書きました。
その後が問題で、ページ内リンクへジャンプすると同時にactiveクラスを削除することでメニューの表示を消すようにコードを書いたのですが、ページが消えた後再びメニューをクリックするとメニューが表示されません。(ページをリロードしてクリックすれば表示される。)
見様見真似でコードをあれこれ書いてみましたがどんなに調べても結局どこが悪いのかわかりません。エラーを見るとクラスを削除したことで関数が読み込めていないような感じですがさっぱり理解できません。
ここのサイトを見て同じような感じでコードを書いたつもりです。
https://tech-dig.jp/hamburger-global-nav/

発生している問題・エラーメッセージ

hamberger.js:16 Uncaught ReferenceError: toggleNav is not defined
at hamberger.js:16
10hamberger.js:5 Uncaught TypeError: Cannot read property 'classList' of null
at HTMLAnchorElement.<anonymous> (hamberger.js:5)

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>shiro</title> 8 <link rel="stylesheet" href="style.css"> 9</head> 10 11<body> 12 <header class="header"> 13 <div class="header_nav"> 14 <div class="u-content-wrapper header_nav_wrapper"> 15 <div class="header_nav_logo">Shiro</div> 16 <a href="#" class="hamburger-menu" id="hamburger-menu-Button"> 17 <div class="hamburger-menu_line"></div> 18 <div class="hamburger-menu_line"></div> 19 <div class="hamburger-menu_line"></div> 20 </a> 21 </div> 22 <ul class="header-menu" id="header-menu"> 23 <li class="header_menu_item" ><a href=#section-concept id="header_menu_item">Concept</a></li> 24 <li class="header_menu_item" ><a href=#work id="header_menu_item">Work</a></li> 25 <li class="header_menu_item" ><a href=#florist id="header_menu_item">Florist</a></li> 26 <li class="header_menu_item" ><a href=#shop_Information id="header_menu_item">Shop information</a></li> 27 <li class="header_menu_item" ><a href=#contact_us id="header_menu_item">Contact us</a></li> 28 </ul> 29 </div> 30 <div class="u-content-wrapper"> 31 <h1 class="header_title">Shiro</h1> 32 <p class="header_title_sub">White flower shop</p> 33 </div> 34 </header>

CSS

1/* header */ 2.header { 3 color: white; 4 width: 100%; 5 height: 620px; 6 background-image: url(./header/header0.png); 7 background-size: cover; 8 text-align: center; 9 font-family: myriad-pro, sans-serif; 10 position: relative; 11} 12 13.header_nav { 14 position: fixed; 15 top: 0; 16 left: 0; 17 width: 100%; 18 height: 80px; 19 background-color: rgba(84, 131, 126,0.5); 20 z-index: 100; 21} 22 23/* ハンバーガーメニュー */ 24.hamburger-menu { 25 display: block; 26 width: 50px; 27 height: 30px; 28 background-color: none; 29 top:0; 30 right: 0; 31 position: relative; 32} 33 34.hamburger-menu_line { 35 display: block; 36 width: 35px; 37 height: .8px; 38 background-color: white; 39 position: absolute; 40 top: 50%; 41 left: 50%; 42 transform: translateX(-50%); 43 transition: .3s; 44} 45 46 47.hamburger-menu_line:nth-of-type(1) { 48 transform: translate(-50%,-8px); 49} 50 51.hamburger-menu.active div:nth-of-type(1) { 52 transform: rotate(45deg) translate(-50%,0px); 53 transform-origin: 0% 50%; 54} 55 56.hamburger-menu.active div:nth-of-type(2) { 57 opacity: 0; 58} 59 60.hamburger-menu_line:nth-of-type(3) { 61 transform: translate(-50%,8px); 62} 63 64.hamburger-menu.active div:nth-of-type(3) { 65 transform: rotate(-45deg) translate(-50%,0px); 66 transform-origin: 0% 50%; 67} 68 69/* 普段は非表示 */ 70 71.header-menu { 72 opacity: 0; 73 visibility: hidden; 74 transition: .3s; 75 position: absolute; 76 width: 100%; 77 z-index: 100; 78} 79 80/* クリックされたときにメニュー表示 */ 81 82.header-menu.active { 83 opacity: 1; 84 visibility: visible; 85 86} 87 88.header_menu_item { 89 background-color: rgba(222, 234, 238,0.8); 90 width: 100%; 91 height: 135px; 92 border-bottom: 1px solid #ccc; 93 line-height: 135px; 94}

JavaScript

1document.addEventListener('DOMContentLoaded', function toggleNav() { 2 document.getElementById('hamburger-menu-Button').addEventListener("click", 3 function() { 4 this.classList.toggle("active"); 5 document.getElementById('header-menu').classList.toggle("active"); 6 }) 7}); 8 9document.addEventListener('DOMContentLoaded', function() { 10 document.getElementById('header_menu_item').addEventListener("click", 11 function() { 12 document.getElementById('header-menu').remove("active"); 13 }) 14}); 15 16toggleNav();

試したこと

こちらのコードを試してみたが結果は変わらなかったです。

JavaScript

1document.addEventListener('DOMContentLoaded', function() { 2 document.getElementById('hamburger-menu-Button').addEventListener("click",function() { 3 this.classList.toggle("active"); 4 document.getElementById('header-menu').classList.toggle("active"); 5 }); 6 document.getElementById('header_menu_item').addEventListener("click", function() { 7 document.getElementById('header-menu').remove("active"); 8 }); 9});

上記にあるサイトを参考にこちらもためしてみましたがactiveクラスすら追加されませんでした。検証でConsoleを見てみると、エラーは出てませんでした。もう訳が分からなくて困り果てております。
いろいろなサイトを見ているのですがJQueryばかりで参考にならないです。

JavaScript

1function toggleNav() { 2 var body = document.body; 3 var hamburger_menu = document.getElementById('hamburger-menu-Button'); 4 var header_menu = document.getElementById("header-menu"); 5 6 hamburger_menu.addEventListener('click', function() { 7 body.classList.toggle('active'); 8 }); 9 header_menu.addEventListener('click', function() { 10 body.classList.remove('active'); 11 }); 12} 13 14toggleNav();

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

kei344

2020/03/06 17:15

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
Kiyobun510

2020/03/06 18:20

すみません、すぐに変更いたしました。 ご指摘ありがとうございました。
guest

回答2

0

自己解決

コードを書き換えたところやっと解決致しました。
thisを使いactiveクラスを削除したままだったのが悪かったみたいです。
最後にまたactiveクラスを追加するコードを書いたところうまく動きました。
夜分遅くに対応してくださった方、ありがとうございました。

JavaScript

1document.addEventListener('DOMContentLoaded', function() { 2 document.getElementById('hamburger-menu-Button').addEventListener("click",function() { 3 this.classList.toggle("active"); 4 document.getElementById('header_menu').classList.toggle("active"); 5 }); 6 document.getElementById('header_menu').addEventListener("click", function() { 7 ** this.classList.remove("active");** 8   document.getElementById('hamburger-menu-Button').classList.toggle("active"); 9 }); 10});

投稿2020/03/06 19:56

編集2020/03/07 15:06
Kiyobun510

総合スコア12

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

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

0

js

1document.addEventListener('DOMContentLoaded', function toggleNav() { 2document.getElementById('hamburger-menu-Button').addEventListener("click", 3function() { 4this.classList.toggle("active"); 5document.getElementById('header-menu').classList.toggle("active"); 6}) 7});

の部分について以下の部分の記載のような感じでないと反応しないです。

js

1対象要素.addEventListener(種類, sampleEvent, false); 2 3function sampleEvent() { 4 5 //ここに処理を記述する 6 7}

上のような書き方ではなくても良い場合、下のjsで動作します。

js

1document.addEventListener('DOMContentLoaded', function() { 2 document.getElementById('hamburger-menu-Button').addEventListener("click",function() { 3 this.classList.toggle("active"); 4 document.getElementById('header-menu').classList.toggle("active"); 5 }); 6 document.getElementById('header_menu_item').addEventListener("click", function() { 7 document.getElementById('header-menu').remove("active"); 8 }); 9});

addEventListenerについて詳しい説明のurlについても一応載せておきます。

投稿2020/03/06 17:09

jackmiwamiwa

総合スコア395

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

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

Kiyobun510

2020/03/06 18:27

拙い文章にご回答ありがとうございます。addEventListenerについてはだいぶ理解できました。 試させていただいたのですがうまくいきませんでした。 やはり一度はうまくいくのですが、その後クリックするとメニューが表示されなくなってしまします。 ちなみにこのようなエラーを確認できました。 ``` Uncaught TypeError: Cannot read property 'classList' of null at HTMLAnchorElement.<anonymous> (hamberger.js:4) ``` ご教授いただければ幸いです。
Kiyobun510

2020/03/06 19:26

ありがとうございます。このようなものがあるのですね。 いただいたcodepenを確認したところ一回目は成功するのですが二回目からは相変わらずメニューは表示されません。 つまるところ動作環境の違いなんでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問