Xがハンバーガーメニューに戻らない

:focusを用いてハンバーガーメニューをXにし、メニューが開くようにはできたのですが、Xを押すとハンバーガーメニューに戻り、メニューが閉じるようにするにはどうすればいいのでしょうか？

html
1<a id="nav-toggle" class="nav_slide_button"  href="#">
2          <span></span>
3          </a>
4
5
6
7

css
1#nav-toggle span, #nav-toggle span::before, #nav-toggle span::after {
2    cursor: pointer;
3    border-radius: 1px;
4    -moz-border-radius: 1px;
5    -webkit-border-radius: 1px;
6    -o-border-radius: 1px;
7    height: 3px;
8    width: 35px;
9    background: #fff;
10    position: absolute;
11    display: block;
12    content: '';
13    -webkit-transition: all 500ms ease-in-out;
14    transition: all 500ms ease-in-out;
15}
16
17
18#nav-toggle span, #nav-toggle span::before, #nav-toggle span::after {
19    cursor: pointer;
20    border-radius: 1px;
21    -moz-border-radius: 1px;
22    -webkit-border-radius: 1px;
23    -o-border-radius: 1px;
24    height: 3px;
25    width: 35px;
26    background: #fff;
27    position: absolute;
28    display: block;
29    content: '';
30    -webkit-transition: all 500ms ease-in-out;
31    transition: all 500ms ease-in-out;
32}
33#nav-toggle:focus span {
34    background-color: transparent;
35}
36#nav-toggle:focus span:before {
37    transform: rotate(45deg);
38    -webkit-transform: rotate(45deg);
39    -ms-transform: rotate(45deg);
40}
41#nav-toggle:focus span:before{
42    top: 0;
43}
44#nav-toggle:focus span:after {
45  top:0;
46}
47#nav-toggle:focus span:after {
48    transform: translateY(-10px) rotate(-45deg);
49    -webkit-transform: translateY(-10px) rotate(-45deg);
50    -ms-transform: translateY(-10px) rotate(-45deg);
51    top: 10px;
52}

Javascript
1$(function() {
2
3	$('.nav_slide_button').click(function() {
4		$('nav').slideToggle();
5	});
6
7
8
9});

kyoya0819

2019/10/02 05:22

とりあえず質問は編集できるのでコードを追記してください。

kyoya0819

2019/10/02 05:32

マークダウン文法をご利用ください。

Lhankor_Mhy

2019/10/02 05:58

> activeを使いながら、解決方法はないでしょうか？ないのではないかと思います。 https://developer.mozilla.org/ja/docs/Web/CSS/:active

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

回答1件

ベストアンサー

使うなら :focus ではないでしょうか？
https://developer.mozilla.org/ja/docs/Web/CSS/:focus

投稿2019/10/03 07:00

x_x

総合スコア13749

Matsunosuke

2019/10/03 10:55

https://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html ご回答ありがとうございます。focusを用いて、クリックを押すとXとなり、メニューが開くようになったのですが、Xを押すと、このサイトのようにハンバーガーメニューに戻りません。何か解決方法があればアドバイスよろしくお願いします