ハンバーガーメニューのページ内リンクをクリックすると画面が閉じない

Question

【実現したいこと】
ハンバーガーメニューのページ内リンクをクリックすると画面が閉じる。

【問題点】
ハンバーガーメニューのページ内リンクをクリックしても画面が閉じない。

　　　　<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">
                    <label for="nav-input" class="close"><span class="close-icon"></span></label>
                    <ul>
                         　　<li><a href="#skill">Skill</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
　　　　</div>

#nav-drawer{
    position: relative;
    padding-right: 35px;
}

.nav-unshown {
    display: none;
}

#nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
}

#nav-open span, #nav-open span:before,#nav-open span:after {
    position: absolute;
    height: 3px;
    width: 20px;
    border-radius: 3px;
    background: #5F2201;
    display: block;
    content: '';
    cursor: pointer;
}

#nav-open span:before {
    bottom: -8px;   
}

#nav-open span:after {
    bottom: -16px;
}

#nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    max-width: 375px;
    text-align: center;
    height: 100%;
    background: gray;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
}

#nav-content ul {
    padding-inline-start: 0;
    padding-top: 80px;
}

#nav-content li  a{
    list-style: none;
    line-height: 5.9;
    font-weight: bold;
    font-size: 25px;
    color: #5F2201;
    cursor: pointer;
    text-decoration: none;
}

#nav-input:checked ~ #nav-close {
    display: block;
    opacity: .5;
}

#nav-input:checked ~ #nav-content  {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, 15);
}

.close {
    position: absolute;
    top: 20px;
    right: 43px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    cursor: pointer;
  }

.close-icon::before {
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #5f2201;
    position: absolute;  
  }
  
.close-icon::after {
    content: "";
    display: block;
    height: 16px;
    width: 2px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;  background: #5f2201;
    position: absolute;
  }

【試したこと】
ハンバーガーメニューのリストの横にチェックボックスを配置し、クリックすると画面が閉じるというアクションをつければいいのではないかと考えましたが、クリックすると画面が閉じるというアクションをつける方法が分かりませんでした。

その他ネットのテンプレートやteratail内の同じような質問と解答を見ましたが、全てjavascriptやjQueryを使用しており既存コードのどこをどう当てはめればいいのか理解できませんでした。

以上超初心者ですがどなたか教えていただければ幸いです。

Comments

[hoshi-takanori]

こちらの記事を参考にしたんですね。（質問文に書いておいて欲しいです。）
https://saruwakakun.com/html-css/reference/nav-drawer
これはリンク先が別ページであると想定してるので、リンククリック時に閉じるとかは考えてないんだと思います。というか、リンク先に飛ぶのとメニューを閉じるという二つの動作を同時に行うには、JavaScript が必須でしょうね。

Answer 1

なるべく簡潔な方法でと言うことで、こんな感じになりました。
内部的にはハンバーガーメニューは
idがnav-inputの隠しチェックボックスをオンオフして制御してるだけなので、
ページ内リンクにチェックボックスと関連付けるlabelを追加します。
ただaタグとlabelタグを二重に使うと動作しなかったので、
labelタグにonclickイベントを追加して、
window.location.hashプロパティを設定してページ内リンクさせています。

    <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">
            <label for="nav-input" class="close"><span class="close-icon"></span></label>
            <ul>
                <li><label for="nav-input" onclick="window.location.hash='skill'">Skill</label></li>
                <li><label for="nav-input" onclick="window.location.hash='about'">About</label></li>
                <li><label for="nav-input" onclick="window.location.hash='contact'">Contact</label></li>
            </ul>
        </div>
    </div>

Comments

[shuto0901]

解決しましたありがとうございます！
とても簡潔にわかりやすく説明してくださって助かりました！