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

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

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

HTML
1　　　　<div id="nav-drawer">
2                <input id="nav-input" type="checkbox" class="nav-unshown">
3                <label id="nav-open" for="nav-input"><span></span></label>
4                <label class="nav-unshown" id="nav-close" for="nav-input"></label>
5                
6                <div id="nav-content">
7                    <label for="nav-input" class="close"><span class="close-icon"></span></label>
8                    <ul>
9                         　　<li><a href="#skill">Skill</a></li>
10                            <li><a href="#about">About</a></li>
11                            <li><a href="#contact">Contact</a></li>
12                    </ul>
13                </div>
14　　　　</div>

CSS
1#nav-drawer{
2    position: relative;
3    padding-right: 35px;
4}
5
6.nav-unshown {
7    display: none;
8}
9
10#nav-open {
11    display: inline-block;
12    width: 30px;
13    height: 22px;
14    vertical-align: middle;
15}
16
17#nav-open span, #nav-open span:before,#nav-open span:after {
18    position: absolute;
19    height: 3px;
20    width: 20px;
21    border-radius: 3px;
22    background: #5F2201;
23    display: block;
24    content: '';
25    cursor: pointer;
26}
27
28#nav-open span:before {
29    bottom: -8px;   
30}
31
32#nav-open span:after {
33    bottom: -16px;
34}
35
36#nav-close {
37    display: none;
38    position: fixed;
39    z-index: 99;
40    top: 0;
41    left: 0;
42    width: 100vw;
43    height: 100vh;
44    background: black;
45    opacity: 0;
46    transition: .3s ease-in-out;
47}
48
49#nav-content {
50    overflow: auto;
51    position: fixed;
52    top: 0;
53    left: 0;
54    z-index: 9999;
55    width: 100%;
56    max-width: 375px;
57    text-align: center;
58    height: 100%;
59    background: gray;
60    transition: .3s ease-in-out;
61    -webkit-transform: translateX(-105%);
62    transform: translateX(-105%);
63}
64
65#nav-content ul {
66    padding-inline-start: 0;
67    padding-top: 80px;
68}
69
70#nav-content li  a{
71    list-style: none;
72    line-height: 5.9;
73    font-weight: bold;
74    font-size: 25px;
75    color: #5F2201;
76    cursor: pointer;
77    text-decoration: none;
78}
79
80#nav-input:checked ~ #nav-close {
81    display: block;
82    opacity: .5;
83}
84
85#nav-input:checked ~ #nav-content  {
86    -webkit-transform: translateX(0%);
87    transform: translateX(0%);
88    box-shadow: 6px 0 25px rgba(0, 0, 0, 15);
89}
90
91.close {
92    position: absolute;
93    top: 20px;
94    right: 43px;
95    width: 20px;
96    height: 20px;
97    transform: rotate(45deg);
98    cursor: pointer;
99  }
100
101.close-icon::before {
102    content: "";
103    display: block;
104    width: 16px;
105    height: 2px;
106    left: 0;
107    right: 0;
108    top: 0;
109    bottom: 0;
110    margin: auto;
111    background: #5f2201;
112    position: absolute;  
113  }
114  
115.close-icon::after {
116    content: "";
117    display: block;
118    height: 16px;
119    width: 2px;
120    left: 0;
121    right: 0;
122    top: 0;
123    bottom: 0;
124    margin: auto;  background: #5f2201;
125    position: absolute;
126  }

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

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

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

hoshi-takanori

2020/03/12 19:15

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

HTML
1    <div id="nav-drawer">
2        <input id="nav-input" type="checkbox" class="nav-unshown">
3        <label id="nav-open" for="nav-input"><span></span></label>
4        <label class="nav-unshown" id="nav-close" for="nav-input"></label>
5
6        <div id="nav-content">
7            <label for="nav-input" class="close"><span class="close-icon"></span></label>
8            <ul>
9                <li><label for="nav-input" onclick="window.location.hash='skill'">Skill</label></li>
10                <li><label for="nav-input" onclick="window.location.hash='about'">About</label></li>
11                <li><label for="nav-input" onclick="window.location.hash='contact'">Contact</label></li>
12            </ul>
13        </div>
14    </div>