開いたままのハンバーガーメニュー(ページ内リンク)を閉じたい

Question

前提・実現したいこと

★開いたままのページ内リンクのハンバーガーメニューを閉じたい

WEB初心者です。

1ページ完結（LP）のサイトを制作していて、
ハンバーガーメニューでフルスクリーンでメニューが出るように設定しました。
ページ内リンクで移動はしてくれるもののメニュー画面が閉じません。

指示を記述していないので当たり前ですが、
どんな指示を書いていいか分からずにいます。
追加指示文等を教えて頂ければ助かります。

該当のソースコード

<header>

    <a class="menu">
        <span class="menu__line menu__line--top"></span>
        <span class="menu__line menu__line--center"></span>
        <span class="menu__line menu__line--bottom"></span>
    </a>
    <nav class="gnav">
        <div class="gnav__wrap">
            <ul class="gnav__menu">
                <li><a href="#page1">page1</a></li>
                <li><a href="#page2">page2</a></li>
                <li><a href="#page3">page3</a></li>
            </ul>
        </div>
    </nav>
</header>

/*menu*/
.menu{
    height: 20px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    z-index: 99;
}
.menu__line{
    background: #fff;
    display: block;
    height: 2px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
.menu__line--center{
    top: 9px;
}
.menu__line--bottom{
    bottom: 0;
}
.menu__line--top.active{
    top: 8px;
    transform: rotate(45deg);
}
.menu__line--center.active{
    transform:scaleX(0);
}
.menu__line--bottom.active{
    bottom: 10px;
    transform: rotate(135deg);
}
/*gnav*/
.gnav{
    background: rgba(0,0,0,0.8);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 98;
}
.gnav__wrap{
    align-items:center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

<script>
$('.menu').on('click',function(){
    $('.menu__line').toggleClass('active');
    $('.gnav').fadeToggle();
    $('.drawer').drawer('close');
    
$('#nav a').on('click', function() {
  $('#nav').toggleClass('active');
  $(".menu").toggleClass('active');
})

});
</script>

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

このサイトを参考にしています。
https://webdesignday.jp/inspiration/technique/html/4746/

Comments

[退会済みユーザー]

読み込んでいるCSSはありますか？(^^)

[sanasa2]

ご返信頂きありがとうございます。CSSを追記いたしました。リンクの文字装飾はまだしていません。

[退会済みユーザー]

ありがとうございます(^^)仕事の手隙で見ようと思ってたのですが仕事が舞い込んできてしまったので、離脱させていただきます(>_<)また見れたとき回答がなかったら見てみますね！すみません！

Answer 1

.menuをクリックした時と同じ処理でいいのでしょうか？
でしたら下記を追加で解決です。

    //   ↓ hrefの値が#から始まるa要素
    $('a[href^="#"]').on('click', function() {
      $('.menu').click(); // .menuをクリックした時と同じ処理

      return false; //a要素のリンク先移動防ぐ
    });

return false;は不要でしたら消してくださいね

Comments

[sanasa2]

akihiro3さん
回答して頂きありがとうございます！
出来ました！！！！
教えて頂いたコードで、思うような動きになりました！
感謝致します。ありがとうございました。