drawerが表示されない

Question

前提・実現したいこと

表題の通り、.humbergerをクリック時に、
下記サイトのようなnavを表示させたい。
drawer
　

ご教授お願い致します。

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

drawer表示できない。
transform
jsのコードをURLから読み、どんな順序で設定しているのか理解はしていますが、、できずにいます。

### 追記
様々なことを試しました。
transform: translateZ(0); の書く場所が間違っているのか？→div toolでnavに書くと、反応する。しかし、humburgerクリック時、戻らない
今は,
addClassでnavの開閉をしようとしていますが,append(<style>　transformの変更)を試みようとしました→未解決

試したこと

上記のサイト(DRAWer)でわかったことは[transform: translate(250px);」を使い、隠して、クリック時に transform: translateZ(0); でdrawerの機能を発揮するような感じがします。

なので、humburgerをクリック時に、classをつけるなどして transform: translateZ(0); を調整しているのですが、navがスライドで表示されません。

どなたか、ご教授いただけると幸いです。
※仮説：nav(bg-colorを指定している）もjsで扱わないといけないのですか？？

追記（行ったこと）

※$("nav").css('display': 'none');
$("head").append('<style> nav{display: none;} </style>');
jsに humburgerに'_active'がないとき、上記を書いてもうまくいきません。ご教授お願い致します。

該当のソースコード

具体的なHTML,CSS,Jsは下記でございます。何卒宜しくお願い致します。

コード

追記　js

if($("this").hasClass('_active')){
  $(this).removeClass('_active');
  $(".line").removeClass('_open');

  $(nav).removeClass("nav-open");
  // $(".drawer-nav").removeClass('_active');
 
  $('.overlay').removeClass('_open');
}else{
      $(this).addClass('_active');
      $('.line').addClass('_open');

      $(nav).addClass("nav-open");
      $('.drawer-nav').addClass('_open');
      $('.overlay').addClass('_open');
    }
  });

  $('.overlay').on('click',function(){
    if($(this).hasClass('_open')){

      $(this).removeClass('_open');
      $('.humburger').removeClass('_active');
      $('.line').removeClass('_open');
     
      $(nav).removeClass('nav-open');   
      // $('.drawer-nav').removeClass('_active');
    }
  });
});

今回はheader部分のnavです。

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

Answer 1

.header-left .nav-open {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

となっていますが、.nav-openという要素がないからではないかと思います。
DevTools を使って、.humbergerをクリック時に.navのクラスがどうなっているのか、よく観察されることをおすすめします。

Comments

[free_teku]

ご回答ありがとうございます。
クリック時に、navに-openをつけるようにしたのですが、
これではいけないのでしょうか？

nav-openをHTML　navクラスにつけると、transform: translate(Z);が反応し
先にnavが表示されます。

結論、うまくいかないです

[Lhankor_Mhy]

> これではいけないのでしょうか？

そのとおりです。
DevTools を使って、.humbergerをクリック時に.navのクラスがどうなっているのか、よく観察されることをおすすめします。
何度も繰り返して同じ問題でつまづいていますから、ほんとにそろそろ根本的になぜこの問題が起こるのか理解するようにした方がいいです。

[free_teku]

承知しました。今一度、考え直します

[Lhankor_Mhy]

考え直すとかは別にいいので、DevTools を使って、.humbergerをクリック時に.navのクラスがどうなっているのかを調べてください。
class="~" がどうなっているのか、コメント欄で報告してください。

[free_teku]

この質問前に一つ疑問があったので確認したいです。
クリック時にnavを見ると,Class部分が→(nav　drawer-nav -open )と表示されます。
個人的には,[drawer-nav]に-openがついているように感じます

ここが原因なのでしょうか？

ご教授お願い致します。

[Lhankor_Mhy]

ちゃんと確認してるじゃないですか……

> 個人的には,[drawer-nav]に-openがついているように感じます

違います。
↓これの1行目に書いてあります。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class
「class グローバル属性 は、要素のクラスを空白区切りで並べたリスト」です。
空白区切りというのは、空白文字で区切られている、という意味です。
"nav drawer-nav -open"は、nav、drawer-nav、-open という名前のクラスのリスト、ということです。
この中には、nav-open はないです。
nav-open がないので、CSSのルールが適用されていません。

[free_teku]

nav-openをaddClass,removeClassを使って、作成して開閉しようと試みているのですが、

これだとうまくいかないんですね？
私なりに考えた結果、下記のようになりました。↓
htmlには,nav-openを先に追記しました。
上部を確認していただけると幸いです。

しかし、うまくいかないので、Toggleを使うしかないという形でしょうか？

[free_teku]

なんか、色々と試していたらうまくできました。
ようやくできました（汗）

ありがとうございます。(__)

[Lhankor_Mhy]

ご解決されて何よりです。