ハンバーガーメニュー・ページ内リンクをクリックで閉じる方法について

Question

ハンバーガーメニューを設置しており、ページ内リンクがあるのですが、
ハンバーガーメニュー内のリンクをクリックするとハンバーガーメニューが閉じないため、ページ移動したという感じがしません。

メニュークリックと同時にハンバーガーメニューを閉じるよう設定したいです。

<div class="toggle_2" style="z-index: 600;"><a href="tel:[phone]"><img src="img/tel.png" alt="" class="sp_tel"></a><a href="https://lin.ee/eJP7DPR"><img src="img/img.png" alt="" class="sp_line"></a>
<a href="https://www."><img src="img/inst.png" alt="" class="sp_inst"></a></div>
<div class="toggle" id="navToggle">
<span class="toggle__bar"></span>
</div>
<nav class="menu_area">
<ul>
<li><a href="index.html">テキスト</a></li>
<li><a href="a.html">テキスト</a></li>
<li><a href="a.html">テキスト</a></li>
<li><a href="c.html">テキスト</a></li>
<li><a href="#d">テキスト</a></li>
<li><a href="#e">テキスト</a></li>
</ul>
</nav>

ハンバーガーに必要なcss */
body{
position: relative;
}
.menu_area,
.container{
position: absolute;
width: 100%;
}
.menu_area{
text-align: right;
height: 100vh;
// background: $sub;
opacity: 0;
& > ul{
float: right;
padding: 100px 10px 0;
margin: 0;
text-align: left;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
width: 100%;
a{
color: #000
}
& > li{
display: block;
padding: 15px 10px;
}
}
&.open{
position: fixed;
opacity: 1;
}
}
.container {
background: #fff;
min-height: 100vh;
transition: .5s;
@media (max-width: 749px){
height:100%;
}
&.open{
// transform: translateX(-200px);
transform: translateX(-100%);
}
}
.toggle{
width: 40px;
height: 30px;
cursor: pointer;
position: fixed;
z-index: 2;
top: 15px;
right: 10px;
z-index: 600;
&bar{ width: 100%; height: 2px; background: $text; position: absolute; top: 0; left: 0; transform-origin: left; transition: .5s; } &:before, &:after{ background: $text; position: absolute; content: ""; width: 100%; height: 2px; transition: .5s; } &:before{ top: 50%; left: 0; } &:after{ bottom: 0; left: 0; transform-origin: left; } &.open{ z-index: 1; .togglebar{
transform: rotate(45deg);
}
&:before{
opacity: 0;
}
&:after{
transform: rotate(-45deg);
}
}
}
.toggle_2{
position: fixed;
z-index: 2;
top: 16px;
left: 80px;
}
.sp_line {
width:110px;
margin-left: 5px;
&:hover{
opacity:0.5;
}
}
.sp_tel {
width:26px;
&:hover{
opacity:0.5;
}
}
.sp_inst {
width:28px;
&:hover{
opacity:0.5;
}
}

overlay{
transition: .5s;
&.open{
transform: translateX(-200px);
cursor: pointer;
width: 100%;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 1;
}
}
.fixbody{
overflow: hidden !important;
}
.tr_t {
text-align: center!important;
display: contents!important;
font-size:2rem!important;
font-weight:bold!important;
}

ご教授お願いいたします。
cssはsassで書いています。
JSは使っておりません。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[o2_]

ご丁寧にありがとうございます。
再度質問を上げてみようと思います。

[m.ts10806]

いえ、質問は編集できますので、適宜調整してもらえればそれで良いです。
こちらは「質問への追記修正依頼」のコメント欄です。
同じ内容で調整のたびに何度も投稿していてはリソースの無駄になります。

[hatena19]

JavaScriptのコードも提示してください。

[hatena19]

inputタグなしで、JSも使わずにやる方法があるんだ。
私は知らないので回答できないですが、
コンパイル済みのCSSコードも提示したほうが回答がつきやすいと思います。