ハンバーガーメニュー・ページ内リンクをクリックで閉じる

Question

ハンバーガーメニューを設置しており、一部ページ内リンクとスムーススクロールを設定しています。
ハンバーガーメニュー内のリンクをクリックするとハンバーガーメニューが閉じるようにしたいと考えています。

ハンバーガーメニュー内のリンクをクリックすると該当箇所まで移動はしますが、ハンバーガーメニューが閉じずに開いたままです。

以下、CSSのみ一部抜粋して記載しています。

<div id="nav">
<ul>
<li><a href="#info">INFORMATION</a></li>
<li><a href="URL"> BOOKSHELF</a></li>
<li><a href="#bkm"">BOOKMARK</a></li>
<li><a href="#mail">CONTACT</a></li><li>
<a href="URL">HOME</a></li>
</ul></div>
<a class="menu" href="#"><span></span><span></span><span></span></a>
<header><h1>タイトル</h1></header><div id="all"><article><section id="info"><h2>タイトル</h2>中身</section><section id="news"><h2>タイトル</h2>中身</section><section id="bkm"><h2>タイトル</h2>中身</section>
<section id="mail"><h2>タイトル</h2><br>
中身</section><div class="footer">中身</div><p class="pagetop"><a href="#"><i class="fas fa-angle-double-up"></i></a></p></div></article></div>

.menu,
.menu span {
display: inline-block;
-webkit-transition:all .4s;
transition: all .4s;
box-sizing: border-box;
}

.menu {
position: fixed;
top: 10px;
right: 12px;
width: 50px;
height: 40px;
margin:6px auto;
padding:6px auto;
z-index: 9999;
}

.menu span {
position: absolute;
left: 12px;
width: 70%;
height: 1px;
background-color: #000;
z-index: 9999;
}

.menu span:nth-of-type(1) {
top: 0px;
}

.menu span:nth-of-type(2) {
top: 18px;
}

.menu span:nth-of-type(3) {
bottom: 0px;
}

.menu.active span:nth-of-type(1) {
-webkit-transform: translateY(20px) rotate(-45deg);
transform: translateY(20px) rotate(-45deg);
}

.menu.active span:nth-of-type(2) {
opacity: 0;
}

.menu.active span:nth-of-type(3) {
-webkit-transform: translateY(-20px) rotate(45deg);
transform: translateY(-20px) rotate(45deg);
}

#nav {
position: fixed;
top: 0;
right: 0;
z-index: 9999;
width: 80vw;
height: 100vh;
background: rgba(240,255,240,1);
opacity: 0;
-webkit-transition: .5s linear;
-moz-transition: .5s linear;
transition: .5s linear;
-moz-transform: translateX(100vw);
-webkit-transform: translateX(100vw);
transform: translateX(100vw);
}

#nav.active{
right: 0;
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}

#nav ul{
margin:20px 0;
padding:20px 0;
}

#nav ul li{
list-style-type: none;
}

#nav ul li a{
font-family:'Nunito',"メイリオ", sans-serif;
display: block;
text-align: center;
text-decoration: none;
color: #003853;
font-size: 18px;
font-weight:700;
margin:20px 0;
padding:10px 0;
}

body{
margin:0;
padding:0;
background:url();
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
letter-spacing:2.4px;
line-height:1.5;
}

header{
width:100%;
height:60px;
top:0;
padding:20px 0;
text-align:center;
position:fixed;
z-index:1;
background-color:rgba(248,254,243,1);
}

section{
background:rgba(255,255,255, .8);
display:block;
font-family:'Nunito',"メイリオ", sans-serif;
font-size:14px;
color: #003853;
text-align:center;
margin:10px auto;
padding:10px auto;
}

.pagetop {
display: none;
position: fixed;
bottom: 30px;
right: 50px;
}

.pagetop a {
display: block;
width: 50px;
height: 50px;
background-color: #333;
border-radius: 50px;
text-align: center;
color: #fff;
font-size: 24px;
text-decoration: none;
line-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
     $('.menu').on('click', function() {
         $(this).toggleClass('active');
         $("#nav").toggleClass('active');
      })
    });

$(function() {
  var pagetop = $('.pagetop');
  $(window).scroll(function () {
  if ($(this).scrollTop() > 80) {
    pagetop.fadeIn();
  } else {
    pagetop.fadeOut();
  }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 600);
    return false;
  });
});

$(function(){
   $('a[href^="#"]').click(function() {
      var speed = 600;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

似たような質問を見たり調べたりして、様々なコードを試してみましたが、ハンバーガーメニュー自体が動かなくなったり、メニューは開けても三本線のアイコンが消えたりしました。
初心者の為、すみませんが教えて下さい。

Answer 1

htmlは<a class="menu" href="#">ではクリックした瞬間にページ上部へ移動してしまうのでbuttonに変更。
cssは<a>を<button>に変更した分を治してください。
jqueryは雑ですが#nav aをクリックしたら...の処理を追加。

<button class="menu"><span></span><span></span><span></span></button>

// 追記
$('#nav a').on('click', function() {
  $('#nav').toggleClass('active');
  $(".menu").toggleClass('active');
})

Comments

[yuria]

素早いお返事ありがとうございます！
お礼が遅くなり、大変申し訳ありません。
ご提示くださったコードに変更した所、希望通りの動きになりました。
ありがとうございます！