ハンバーガーメニューが閉じません

Question

ハンバーガーメニューが閉じません

ここに質問の内容を詳しく書いてください。
Webデザインナーになって、まだ１年たっておらずコーディング技術がなく困っています。

ナビゲーションをハンバーガーメニューにしています。
現在の動作状況は下記の流れになります。
ハンバーガー開く→メニューを押す（ページ内リンク&SNSボタン）→※スクロールor新しいタブに移動するもののハンバーガメニューが閉じない

初心者なので、
難しい内容はなるべく入れないようにしようと
ハンバーガメニューを押すと３本線がクロスするといったような、
アニメーション等入れずにコーディングしております。

（参考サイト：https://saruwakakun.com/html-css/reference/nav-drawer）

制作しているサイトは、
wordpress等の導入はなくhtml・cssで制作しております。

一部スムーススクロールの指示を記入しています。

HTML

<header>
<div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input">
　　　 </label>

 <div id="nav-content">
    <ul class="nav">
           <!--ページ内リンク&SNSボタン→下記URLクリックしてもハンバーガーメニュー閉じない-->
           <div class="sp_nav_inner">
           <li><a href="#section02">テキスト</a></li>
           <li><a href="#section03">テキスト</a></li>
           <li><a href="#section04">テキスト</a></li>
           <li><a href="#section05">テキスト</a></li>
    　      <div class="sp_navsns">
              <li class="header_sns-item"><a href="#" target="_blank"><img src="img/icon_twitter.svg"></a></li>
              <li class="header_sns-item"><a href="#"><img src="img/icon_facebook.svg" alt="facebook"></a></li>
              <li class="header_sns-item"><a href="#"><img src="img/icon_instagram.svg" alt="instagram"></a></li>
              <li class="header_sns-item"><a href="#"><img src="img/icon_youtube.svg" alt="youtube"></a></li>
             </div>
          </div>
      </ul>
   </div>
</div>
</header>
    <div id="#section02">テキスト</div>
    <div id="#section03">テキスト</div>
    <div id="#section04">テキスト</div>
    <div id="#section05">テキスト</div>

CSS

<style type="text/css">
header{
 width:100%;
 height:50px;
 background: green;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: middle;
　background:#9B2E8E;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 29px;/*長さ*/
  background: #ffffff;
  display: block;
  content: '';
  cursor: pointer;
  margin-top:14px;
  margin-left:11px;
}
    
#nav-open span:before {
  bottom: -10px;
　left: -11px;
}
    
#nav-open span:after {
  bottom:-20px;
　left:-11px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
   overflow: auto;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;/*最前面に*/
   width: 100vw;/*右側に隙間を作る（閉じるカバーを表示）*/
   height: 100%;
   background: #D14D98;/*背景色*/
   transition: .3s ease-in-out;/*滑らかに表示*/
   -webkit-transform: translateX(-105%);
   transform: translateX(375%);/*左に隠しておく*/
   top:50px;
   text-align: center;
	
}
	
.sp_nav_inner{
　width: 300px;
　height: 300px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
	
.sp_nav_inner li{
  padding-bottom: 50px;
}
	
#nav-content li a{
   color: #ffffff;
}

.sp_navsns{
　　display: flex;
    justify-content: center;
    align-items: center;
}
    
.sp_navsns a img{
    height: 23px;
    opacity: 1;
    transform: opacity .3s;
}
    
.sp_navsns a{ 
    padding-right: 5px;
}
    
.sp_navsns a:last-child{
    padding-right: 15px;
}

	
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

html{
  scroll-behavior: smooth;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>
<script>
	$(function() {
		$('#btn li').on('click', function() {
			var $this = $(this),
				$grid = $('#animationList');

			$('#btn .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});

		$('#animationList').shuffle({
			group: 'all',
			speed: 700,
			easing: 'ease-in-out'
		});
	});
</script>
<script>
	Element.scrollIntoView({
  behavior: 'smooth',
  block: 'start'
})
</script>

補足情報

Abode Dreamweaver 2018CC
html5
css3

Comments

[m.ts10806]

JS　内にstyleが紛れ込んでますが、これは？

[m.ts10806]

JavaScript側でエラー出てますがこちらは認識済みですか？（ブラウザ開発ツールのコンソールで確認）

[kyoya0819]

JavaScriptって言語名に書いて<script>入れたり他の言語入れたりするのやめてください。
あと、scriptタグやstyleタグlinkタグの記載場所も書くと回答がより得られます。

[OHIRA_web]

タグ混合大変失礼致しました。
以後気を付けます。

また、エラー表示は確認していたのですが
修正内容がわからずこちらにご質問させて頂きました。
お手数ですが修正箇所あればご指摘頂けたら幸いです。
何卒宜しくお願い致します。

[m.ts10806]

エラー認識済みでしたらそれは記載すべきと思います。
https://teratail.com/help/question-tips#questionTips2-1
https://teratail.com/help/question-tips#questionTips3-4

[OHIRA_web]

失礼致しました。
わざわざありがとうございます。
以後気を付けます。

Answer 1

checkboxのチェックを外せばよいのではないでしょうか

<li><a href="index.html#section02" onclick="cls()">テキスト</a></li>

<script>
        function cls(){
            var id = document.getElementById('nav-input');
            id.checked = false;
        }
</script>

Comments

[OHIRA_web]

早急な対応有難う御座います。
ご指摘頂きましたコードを追記致しましたところ、
無事に動作致しました。
大変助かりました。

また、何か機会がありましたら宜しくお願い致します。