ハンバーガーメニューが正しく動かない

Question

前提・実現したいこと

HTML・CSS・jQueryでふわっと出てくるハンバーガーメニューを作成中です。
作成してみたのですが、ハンバーガーメニューを押しても隠れているメニューが表示されません。
様々なサイトを見てみたのですが中々解決方法がわからなかった為、恐縮ではありますがご質問させて頂きます…。

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

ハンバーガーメニューを押しても隠れているメニューが表示されない

該当のソースコード

HTML

        <div class="container">
            <div class="header-menu">
                <div class="header-left">
                    <h1>Hiroto Morita</h1>
                    <!-- <i class="fas fa-bars fa-lg menu-icon"></i> -->
                    <div class="hamburger">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <nav class="header-right">
                    <ul class="nav-list">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#service">Service</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
コード

CSS

    .hamburger {
        display: block;
        position: fixed;
        z-index: 3;
        right: 13px;
        top: 12px;
        width: 42px;
        height: 42px;
        cursor: pointer;
        text-align: center;
    }
    .hamburger span {
        display: block;
        position: absolute;
        width: 30px;
        height: 2px;
        left: 6px;
        background: #000;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }
    .hamburger span:nth-child(1) {
        top: 10px;
    }
    .hamburger span:nth-child(2) {
        top: 20px;
    }
    .hamburger span:nth-child(3) {
        top: 30px;
    }
    /* ナビ開いてる時のボタン */
    .hamburger.active span:nth-child(1) {
        top: 16px;
        left: 6px;
        background: #fff;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) {
        top: 16px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    nav.header-right {
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        color: #fff;
        background: rgba(0, 0, 0, 0.7);
        text-align: center;
        width: 100%;
        opacity: 0;
        transition: opacity .6s ease, visibility .6s ease;
    }
    nav.header-right ul {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    nav.header-right ul li {
        list-style-type: none;
        padding: 0;
        width: 100%;
        transition: .4s all;
    }
    nav.header-right ul li:last-child {
        padding-bottom: 0;
    }
    nav.header-right ul li:hover {
        background: #ddd;
    }
    nav.header-right ul li a {
        display: block;
        color: #fff;
        padding: 1em 0;
        text-decoration: none;
    }
    /* このクラスを、jQueryで付与・削除する */
    nav.header-right.active {
        opacity: 100;
    }
コード

jQuery

    $(window).scroll(function () {
        $(".slide").each(function () {
            var imgPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > imgPos - windowHeight + windowHeight / 4) {
                $(this).addClass("effect-scroll");
            }
        });
    });
    jQuery(window).scroll();

    /* ハンバーガーメニュー */
    $('.hamburger').click(function () {
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $('.header-right').addClass('active');
        } else {
            $('.header-right').removeClass('active');
        }
    });
});
コード

ご教示頂けますと幸いです…。

Comments

[mari.rinn]

該当する箇所だけで良いのでhtmlのコードも記載をお願いしたいのと、jQueryのコードは途中からではなく、そのクリックイベントの全部を記載していただけますか？

[hiro212]

HTML掲載しているつもりでした。申し訳ございませんでした????
jQueryについて、全て記載いたしました。
ご指摘頂きありがとうございます。
追加した内容でご評価可能でしょうか？

Answer 1

記載されているコードで動作テストを行ってみました（ブラウザはChrome）が、正常にメニューがふわっと表示されました。

それで確認なのですが、htmlのhead部分のjQueryの読み込みは、正しく行われていますか？
記載されているjQueryのコードが外部ファイル（仮にファイル名を、test.jsとすると、）だったとして、

<script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./test.js"></script>

このように、jQueryの読み込みを先に行わないといけないのですが、そうなっていますか？

それと、記載されているjQueryのコードは、頭の
$(function(){が抜けていますが、これはコピペし忘れただけですかね？
（閉じの　});はあるので多分そうだとは思いますが）

あと、考えられることは、ブラウザのキャッシュが残っている場合。CSSやjavascriptなどはさいさいこれがあるので、更新したのに変化がないと思ったらまずはキャッシュをクリアしてください。

それと、問題には直接関係ないですが、

 nav.header-right.active {
        opacity: 100;
    }

opacityの値は　0～1までです。　1　もしくは　1.0　としてください。

Comments

[hiro212]

ご回答を頂き誠にありがとうございます！
また、ご返信が遅くなり大変申し訳ございません。
◉jQueryの読み込みについて
<!-- Google jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 自サイトのJavaScript -->
<script src="portfolio1.js"></script>
上記の様になっております。間違っておりますでしょうか？

◉$(function){ の記載について
記載しております！コピペ漏れでした。申し訳ございません。

◉キャッシュとopacity
かしこまりました！ご教示頂きありがとうございます。

[mari.rinn]

質問を閉められたということは正常に動いたということですかね。
それなら何よりです。(ちなみにjqueryの記載はそれで合っています)。
お疲れ様でした。