ハンバーガーメニューを開いていないのに、透明で開いた状態になっているのを解決したいです

Question

HTML等、コーディング初心者です。
ハンバーガーメニューを実装したく下記のURLを参考に、なんとか作ることができました。
https://knoweb.net/html-css/css/responsive-hamburgermenu/　←ふわっと出てくるメニュー

しかしここで問題が、、、
ハンバーガーメニューを開いていないのに、メニューが見えないまま開いている状態になってしまいます。
そのためサイトの背景をクリックしただけでリンク先に飛ぶようになってしまいました。

こちらメニューが開きっぱなしの解決方法ございましたら、ご教授お願いいたします。

<div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <nav class="globalMenuSp">
        <ul id="manu" class="menu">
            <li><a href="#news">News</a></li>
            <li><a href="#work">Works</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#access">Access</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

/*　ハンバーガーボタン　*/
    .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 : #555;
        -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.globalMenuSp {
        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.globalMenuSp ul {
        text-align: center;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    nav.globalMenuSp ul li {
        text-align: center;
        list-style-type: none;
        padding: 0;
        width: 100%;
        transition: .4s all;
    }
    
    .menu li:first-child{
        width: 100%;
    }
    
    nav.globalMenuSp ul li:last-child {
        padding-bottom: 0;
    }
    nav.globalMenuSp ul li:hover{
        background :#ddd;
    }

    nav.globalMenuSp ul li a {
        display: block;
        color: #fff;
        padding: 1em 0;
        text-decoration :none;
    }
    
    .menu a:hover::before{
        content: none;
    }
    

    /* このクラスを、jQueryで付与・削除する */
    nav.globalMenuSp.active {
        opacity: 100;

    }

$(function() {
        $('.hamburger').click(function() {
            $(this).toggleClass('active');

            if ($(this).hasClass('active')) {
                $('.globalMenuSp').addClass('active');
            } else {
                $('.globalMenuSp').removeClass('active');
            }
        });
    });
    $('#manu a[href]').on('click', function(event) {
        $('.hamburger').trigger('click');
    });

Answer 1

display:none; だとアニメーションが効かないので、width を 0% と 100% で切り替えます。

メニューを開く時はすぐに100%にして、閉じる時は0.6s後に 0% にします。

nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(0,0,0,0.7);
  text-align: center;
  width: 0%;
  opacity: 0;
  transition: opacity .6s ease, width 0s .6s; /* 修正 閉じる時のアニメーション */
}


/* 中略 */

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  width: 100%;
  opacity: 1;
  transition: opacity 1.6s ease, width 0s; /* 追加 開く時のアニメーション */
}

Comments

[wataneko17]

ご回答いただきありがとうございました。
やりたかったことを実現することができ、またとても勉強になりました！

Answer 2

やり方は色々ありそうですがcssに下記を追加。

nav:not(.active).globalMenuSp
{
  display:none;
}

Comments

[wataneko17]

ご回答いただきありがとうございます。
シンプルなものを作るときはこちら使えると思いました。
ぜひ今後の参考にさせていただきます。