ハンバーガーメニューを閉じる×印を作りたい（CSSのみで）

前提・実現したいこと

ハンバーガーメニューを閉じる×印をCSSのみで作りたい。

発生している問題・エラーメッセージ

ハンバーガーメニューの閉じる×印の作り方がわからない。

該当のソースコード

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                <div id="nav-content">
6                    <ul>
7                        <li>Skill</li>
8                         <li>About</li>
9                        <li>Contact</li>
10                    </ul>
11                </div>
12            </div>

CSS
1#nav-drawer{
2    position: relative;
3    padding-right: 35px;
4    padding-top: 20px;
5}
6
7.nav-unshown {
8    display: none;
9}
10
11#nav-open {
12    display: inline-block;
13    width: 30px;
14    height: 22px;
15    vertical-align: middle;
16}
17
18#nav-open span, #nav-open span:before,#nav-open span:after {
19    position: absolute;
20    height: 3px;
21    width: 20px;
22    border-radius: 3px;
23    background: #5F2201;
24    display: block;
25    content: '';
26    cursor: pointer;
27}
28
29#nav-open span:before {
30    bottom: -8px;   
31}
32
33#nav-open span:after {
34    bottom: -16px;
35}
36
37#nav-close {
38    display: none;
39    position: fixed;
40    z-index: 99;
41    top: 0;
42    left: 0;
43    width: 100%;
44    height: 100%;
45    background: black;
46    opacity: 0;
47    transition: .3s ease-in-out;
48}
49
50#nav-content {
51    overflow: auto;
52    position: fixed;
53    top: 0;
54    left: 0;
55    z-index: 9999;
56    width: 90%;
57    max-width: 375px;
58    text-align: center;
59    height: 100%;
60    background: #ffffff;
61    transition: .3s ease-in-out;
62    -webkit-transform: translateX(-105%);
63    transform: translateX(-105%);
64}
65
66#nav-content ul {
67    padding-inline-start: 0;
68}
69
70#nav-content li {
71    list-style: none;
72    padding-top: 70px;
73    font-weight: bold;
74    color: #5F2201;
75}
76
77#nav-input:checked ~ #nav-close {
78    display: block;
79    opacity: .5;
80}
81
82#nav-input:checked ~ #nav-content {
83    -webkit-transform: translateX(0%);
84    transform: translateX(0%);
85    box-shadow: 6px 0 25px rgba(0, 0, 0, 15);
86}
87

試したこと

補足情報（FW/ツールのバージョンなど）

上記のコードはハンバーガーメニューを閉じる際、画面右端をクリックして閉じますが、
メニューを開いた際右上に×印が現れてクリックすると閉じるというのが理想です。

m.ts10806

2020/03/10 06:56

class="nav=unshown" htmlはこうなってますがcssは .nav-unshown となってます。実際はどちらですか？それとも本当にこのままですか？あと、ネット上にこの手のものは転がってそうに思いますが、どれも参考になりませんでしたか？(調べたこと試したことがなにも書いてないので)

shuto0901

2020/03/10 12:05

htmlが間違えており正しくはclass="nav-unshown"でした。申し訳ございません。調べましたがCSSだけでハンバーガーメニューを実装するサイトは閉じる×印がないものばかりで参考になりませんでした。三本線をタップした後、線の傾きを変えて×印を作るというのは調べてなんとなくわかりましたが、この既存のコードのどこをどう変更したらいいのか数時間調べ、考えてもわからなかったので質問させていただきました。

m.ts10806

2020/03/10 12:06

質問は編集できますので、適宜調整してください。あと、念のため確認したサイトURLをいくつか代表的なもので結構ですのでご提示ください。

shuto0901

2020/03/10 12:19

こちらが現在のハンバーガーメニューのサンプルです。 https://saruwakakun.com/html-css/reference/nav-drawer 他に https://q-az.net/hamburger-menu-only-css/ https://lab.sonicmoov.com/markup/css/hamburgers/ https://manabiact.com/make-hamburger-menu/ 上記のようなサイトを「ハンバーガーメニュー　CSSのみ　×印」などの検索ワードで調べました。よろしくお願いします。

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

回答3件

ベストアンサー

作例

#nav-content直下の任意の場所に以下のhtmlタグを追加する

html
1<label for="nav-input" class="close"><span class="close-icon"></span></label>

CSS
1.close {
2  position: absolute;
3  top: 20px;
4  right: 20px;
5  width: 20px;
6  height: 20px;
7  transform: rotate(45deg);
8  cursor: pointer;
9}
10
11.close-icon::before {
12  content: "";
13  display: block;
14  width: 16px;
15  height: 2px;
16  left: 0;
17  right: 0;
18  top: 0;
19  bottom: 0;
20  margin: auto;
21  background: #5f2201;
22  position: absolute;
23  
24}
25
26.close-icon::after {
27  content: "";
28  display: block;
29  height: 16px;
30  width: 2px;
31  left: 0;
32  right: 0;
33  top: 0;
34  bottom: 0;
35  margin: auto;  background: #5f2201;
36  position: absolute;
37}

解説

まず、このCSSのみでつくるハンバーガーメニューの仕組みですが、チェックボックス（<input id="nav-input" type="checkbox" class="nav-unshown">）にチェックがついたらメニューを開く、ついていなかったらメニューを閉じる、ということを、cssの#nav-input:checked ~ #nav-contentあたりの指定でやっています。
なので、開いたり閉じたりしたかったらチェックボックスを操作すれば良いです。

チェックボックスの操作はチェックボックスそのものをクリックする以外に、labelタグを使えば別の場所からもできます。ハンバーガーメニューやメニュー外の黒い半透明のエリアがlabelタグで囲まれているのはそのためです。

それを応用して、開いたメニューの中にlabelタグをいれておけば、それが閉じるボタンになります。

×印の作り方についてはすでにご自身で調べられているようなので詳しく解説はしません。new1roさんの回答も参考にして下さい。

投稿2020/03/10 12:35

hwatarig

総合スコア461

shuto0901

2020/03/10 14:35

ありがとうございます。無事解決いたしました！！何時間も考えて解決できなかったのでめちゃくちゃ嬉しいてす！

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

::before, ::after 疑似要素と transform プロパティを用いることで、質問者さんの実現したいことが行えると思います (動作確認用リンク)。

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  <div id="nav-content">
6  <label class="nav-unshown" id="btn-nav-close" for="nav-input"></label>
7    <ul>
8      <li>Skill</li>
9      <li>About</li>
10      <li>Contact</li>
11    </ul>
12  </div>
13</div>

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

投稿2020/03/10 12:28

s8_chu

総合スコア14731

こんな感じですかね? もしクラス名は好きなように変更してください。
https://codepen.io/new1ro/pen/jOPYQBp

HTML
1<div class="icon-close"></div>

CSS
1.icon-close {
2  position: relative;
3  width: 24px; /* ボタンのサイズ */
4  height: 24px; /* ボタンのサイズ */
5}
6.icon-close::before,
7.icon-close::after {
8  content: "";
9  position: absolute;
10  top: 0;
11  right: 0;
12  bottom: 0;
13  left: 0;
14  margin: auto;
15  width: 100%;
16  height: 2px; /* 線の太さ */
17  background: #000; /* 線の色 */
18}
19.icon-close::before {
20  transform: rotate(45deg);
21}
22.icon-close::after {
23  transform: rotate(-45deg);
24}