ハンバーガーメニューのボタンをクリックしたら×にしたい。

ネットで調べ、見よう見まねで以下の通り作成してみたのですが、
.openbtnにactiveクラスの付与がうまくいかず、×になりません。

どのように訂正すれば動きますでしょうか・・・？

jquery
1$('.openbtn').on('click',function(){
2    $('.openbtn').toggleClass('active');
3	$('.sp_nav').toggleClass('active');
4    $('.sp_nav.active').fadeToggle(500);
5  });

HTML
1　<!--ハンバーガーメニュー-->
2  <div class="openbtn">
3     <span></span>
4     <span></span>
5     <span></span>
6  </div>

CSS
1/*-----ボタン内側デザイン-----*/
2.openbtn span {
3    display: inline-block;
4    transition: all .4s;
5    position: absolute;
6    left: 12px;
7    height: 3px;
8    border-radius: 2px;
9    background: rgb(109, 76, 76);
10    width: 50%;
11}
12.openbtn span:nth-of-type(1) {
13    top: 14px;
14}
15.openbtn span:nth-of-type(2) {
16    top: 22px;
17    height: 2px;
18}
19.openbtn span:nth-of-type(3) {
20    top:30px;
21}
22
23@media screen and (max-width: 711px) {
24.openbtn {
25     display: block;
26     width: 20%;
27}
28.sp_nav {
29     position: fixed;
30}
31}
32/*　activeクラス付与で線が回転して×になる【！ここがうまく反応しません】*/
33.openbtn.active span:nth-of-type(1) {
34    top: 16px;
35    left: 16px;
36    transform: translateY(6px)
37    rotate(-45deg);
38    width: 30%;
39}
40.openbtn.active span:nth-of-type(2) {
41    opacity: 0;/*真ん中の線を透過*/
42}
43.openbtn.active span:nth-of-type(3) {
44    top: 28px;
45    left: 16px;
46    transform: translateY(-6px)
47    rotate(45deg);
48    width: 30%;
49}
50
51
52/*-----ハンバーガーボタン外側デザイン-----*/
53.openbtn {
54    position: relative;
55    cursor: pointer;
56    width: 45px;
57    height: 45px;
58    display: none;
59    width: 15%;
60    padding: 20px 5px;
61}
62.sp_nav {
63    display: none;
64    margin-top: 80px;
65    z-index: 10;
66    width: 100%;
67    height: 100vh;
68    margin-left: auto;
69    color: #efefef;
70    background-color: rgba(225, 244, 247, 0.7);
71}
72.sp_nav ul {
73    width: 100%;
74    height: 100%;
75    padding: calc(((100vh - 75%) - 80px) / 2) 0;
76}
77.sp_list {
78    width: 100%;
79    height: 15%;
80    display: flex;
81    justify-content: center;
82    align-items: center;
83}
84

Lhankor_Mhy

2021/11/17 02:05

ご提示のコードを試してみましたが、Xになりました。つまり、問題が再現しませんでした。ご提示いただいていない部分に原因があると思われます。（たとえば jQuery を読み込んでいないとか）

guchinooo

2021/11/17 02:30

ご回答ありがとうございます。メディアクエリの記載が漏れていたので追記しましたが・・・あまり関係ないですよね。。 fadeToggle(500)の部分は反応していたのでjQueryを読み込んでいないことはないはずですし、従って.sp_navにactiveクラスの付与はできているはずなのですが・・・( ;∀;) もう少しくまなく探してみます・・・。

Lhankor_Mhy

2021/11/17 03:11

とりあえず、クラスの変更で失敗しているのか、クラスの変更はできているがCSSで失敗しているのか、DevTools で原因を特定した方がいいと思います。