humbergerメニュークリック時に、drawer表示on,offさせたい

前提・実現したいこと

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

Googleソース非表示

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

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

2overlayをクリックしても、元のように戻らない

試したこと

上記のように、コードを調べ、どんなかたちで行うのかを調べ理解しました。
1navがひらいたときに,overlayにwidth:100%;などを書くことで切り返しを行えることなど

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>石井</title>
8    <meta name="description" content="おすすめ教材">
9    <link rel="stylesheet" href="./css/destyle.css">
10    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11    <!--flatpicker-->
12    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
13    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
14    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
15    <link rel="stylesheet" href="./css/style.css">
16</head>
17    <div class="nav-wrapper">
18        <header class="header">
19            <div class="header-inner">
20                <div class="header-left">
21                    <h1 class="logo">
22                        <a href="#">
23                            <img class="header-logo" src="/img/top-header-logo.png" alt="">
24                        </a>
25                    </h1>
26                    
27                    <nav class="nav nav-open drawer-nav">
28                        <ul class="header-list">
29                            <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
30                            <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
31                            <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
32                        </ul><!-- /.header-list -->
33                    </nav><!-- /.nav -->
34                
35                </div>
36                <div class="header-right">
37                    <div class="header-link " id="js-modal">
38                        <a class="calender-link js-modal-open" href="#">
39                            <!-- <img src="./img/calender.png" alt="カレンダー"> -->
40                            宿泊予約
41                        </a>
42                    </div><!-- /.header-link -->
43
44                    <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
45                        <span class="line"></span ><span class="line"></span><span class="line"></span>
46                    </button>
47                </div><!-- /.header-right -->
48            </div><!-- /.header-inner -->
49        </header><!-- /.header -->
50        <div class="overlay"></div><!-- /.overlay -->
51 </div><!-- /.nav-wrapper -->
52</body>
53</html>
54

CSS
1.header {
2  position: fixed;
3  top: 0;
4  z-index: 999;
5  width: 100%;
6  max-height: 80px;
7  background-color: transparent;
8  display: -webkit-box;
9  display: -webkit-flex;
10  display: -ms-flexbox;
11  display: flex;
12  -webkit-box-pack: justify;
13  -webkit-justify-content: space-between;
14      -ms-flex-pack: justify;
15          justify-content: space-between;
16  padding: 10px 20px;
17}
18
19@media screen and (min-width: 600px) and (max-width: 1179px) {
20  .header {
21    padding: 15px 20px;
22  }
23}
24
25@media screen and (max-width: 599px) {
26  .header {
27    padding: 8px 10px;
28    max-height: 60px;
29  }
30}
31
32.header-inner {
33  max-width: 1880px;
34  width: 100%;
35  display: -webkit-box;
36  display: -webkit-flex;
37  display: -ms-flexbox;
38  display: flex;
39  -webkit-box-align: center;
40  -webkit-align-items: center;
41      -ms-flex-align: center;
42          align-items: center;
43  margin: 0 auto;
44  box-sizing: border-box;
45  -webkit-box-sizing: border-box;
46}
47
48.header-left {
49  display: -webkit-box;
50  display: -webkit-flex;
51  display: -ms-flexbox;
52  display: flex;
53  -webkit-box-pack: left;
54  -webkit-justify-content: left;
55      -ms-flex-pack: left;
56          justify-content: left;
57  -webkit-box-align: center;
58  -webkit-align-items: center;
59      -ms-flex-align: center;
60          align-items: center;
61}
62
63.header-left h1 {
64  display: block;
65}
66
67.header-left h1 .logo img {
68  display: block;
69  width: 130px;
70  height: 130px;
71  margin: 20px 120px 20px 20px;
72}
73
74.header-left .nav {
75  display: -webkit-box;
76  display: -webkit-flex;
77  display: -ms-flexbox;
78  display: flex;
79  -webkit-box-pack: justify;
80  -webkit-justify-content: space-between;
81      -ms-flex-pack: justify;
82          justify-content: space-between;
83  -webkit-box-align: center;
84  -webkit-align-items: center;
85      -ms-flex-align: center;
86          align-items: center;
87  margin-left: 120px;
88  /*  @include sp{
89                        right: -75%;
90                    } */
91}
92
93.header-left .nav .header-list {
94  display: -webkit-box;
95  display: -webkit-flex;
96  display: -ms-flexbox;
97  display: flex;
98  -webkit-box-align: center;
99  -webkit-align-items: center;
100      -ms-flex-align: center;
101          align-items: center;
102  padding-top: 20px;
103  padding-bottom: 20px;
104}
105
106.header-left .nav .header-list .header-item {
107  color: #fff;
108}
109
110@media screen and (max-width: 599px) {
111  .header-left .nav .header-list .header-item {
112    padding: 20px;
113    font-size: 2rem;
114  }
115}
116
117.header-left .nav .header-list .header-item + .header-item {
118  padding-left: 30px;
119}
120
121.header-left .nav .header-list .header-item > a {
122  color: #fff;
123  display: inline-block;
124  -webkit-transition: .3s;
125  transition: .3s;
126  /* 0.3秒で拡大までの時間 */
127}
128
129@media screen and (min-width: 600px) and (max-width: 1179px) {
130  .header-left .nav-open {
131    top: 80px;
132    position: fixed;
133    z-index: 2;
134    overflow: hidden;
135    width: 16.25rem;
136    background-color: #000;
137    width: 50%;
138  }
139}
140
141@media screen and (max-width: 599px) {
142  .header-left .nav-open {
143    top: 60px;
144    position: fixed;
145    z-index: 2;
146    overflow: hidden;
147    width: 16.25rem;
148    background-color: rgba(0, 0, 0, 0.9);
149    width: 75%;
150    -webkit-transform: translateZ(0);
151            transform: translateZ(0);
152  }
153}
154
155.header-left .drawer-nav_active {
156  -webkit-transform: translateZ(0);
157          transform: translateZ(0);
158}
159
160.header-right {
161  margin-left: auto;
162}
163
164@media screen and (max-width: 599px) {
165  .header-right {
166    margin-left: 20px;
167  }
168}
169
170.header-right .header-link {
171  /*  height: calc(54/80*100%);
172                background-color: $link-color;
173                border-radius: 3px;
174                padding: 15px 35px;
175                display: flex;
176                justify-content: flex-end;
177                align-items: center; */
178}
179
180@media screen and (min-width: 600px) and (max-width: 1179px) {
181  .header-right .header-link {
182    margin-left: auto;
183  }
184}
185
186.header-right .header-link .calender-link {
187  display: block;
188  background-color: #978F10;
189  text-decoration: none;
190  font-weight: bold;
191  -webkit-box-align: center;
192  -webkit-align-items: center;
193      -ms-flex-align: center;
194          align-items: center;
195  text-align: center;
196  color: #fff;
197  padding: 10px 37px;
198  font-size: 1.6rem;
199  -webkit-transition: .3s;
200  transition: .3s;
201}
202
203@media screen and (min-width: 600px) and (max-width: 1179px) {
204  .header-right .header-link .calender-link {
205    margin-right: 100px;
206  }
207}
208
209@media screen and (max-width: 599px) {
210  .header-right .header-link .calender-link {
211    padding: 8px 16px;
212    font-size: 1.4rem;
213  }
214}
215
216.header-right .header-link .calender-link::before {
217  content: "";
218  display: inline-block;
219  margin: -3px 5px 0 0;
220  background: url(../../img/calender.png) no-repeat;
221  background-size: contain;
222  vertical-align: middle;
223  width: 22px;
224  height: 22px;
225}
226
227.header-right .header-link .calender-link:hover {
228  background-color: #000;
229}
230
231.nav-wrapper {
232  height: 100%;
233  overflow-x: hidden;
234  position: relative;
235}
236
237.overlay {
238  content: "";
239  display: block;
240  width: 0;
241  height: 0;
242  background-color: rgba(0, 0, 0, 0.5);
243  position: absolute;
244  top: 0;
245  left: 0;
246  z-index: 2;
247  opacity: 0;
248  -webkit-transition: opacity .5s;
249  transition: opacity .5s;
250}
251
252.overlay._open {
253  width: 100%;
254  height: 100%;
255  opacity: 1;
256}
257

js
1$(function(){
2
3  $(".humburger").on('click', function(){
4    //humberger
5    $(this).toggleClass("_open");
6    $(".line").toggleClass("_open");
7
8    //nav
9    $(".nav").addClass("nav-open");
10    $(".drawer-nav").toggleClass("_active");
11    
12if($("this").hasClass('_active')){
13  $(this).removeClass('_active');
14
15  $(".drawer-nav").removeClass('_active');
16 $(".nav").removeClass("nav-open");
17  $(".line").removeClass('_open');
18  $('.overlay').removeClass('_open');
19}else{
20      $(this).addClass('_active');
21      $('.drawer-nav').addClass('_active');
22      
23      $(".nav").addClass("nav-open");
24      $('.line').addClass('_open');
25      $('.overlay').addClass('_open');
26    }
27  });
28
29  $('.overlay').on('click',function(){
30    if($(this).hasClass('_open')){
31      $(this).removeClass('_open');
32      $('.humberger. , .line').removeClass('_open');
33      $('main').removeClass('_open');
34      $('nav').removeClass('_open');      
35    }
36  });
37});

Lhankor_Mhy

2021/10/18 03:09

「drawer」とは .drawer-nav のことでしょうか？そうであれば、ハンバーガーメニューをクリックする前から表示されているようでした。

free_teku

2021/10/19 05:29

drawer-navがレスポンシブによって、表示、非表示が異なります。 pc版は表示されます tab,sp(スマホ）は上記のようにdrawerで表示させたいです。

Lhankor_Mhy

2021/10/19 06:59

「drawer」とは .drawer-nav のことのことだが、その表示・非表示については気にしなくてよい、ということですね。理解しました。そうすると、残る問題は「overlayをクリックしても、元のように戻らない」についてということでいいですか？

free_teku

2021/10/19 07:08

失言しました。申し訳ございません。 PC版は良いのですが、 tab,spでは、navを開き(bg-color: #000;)たいのですが、できません。そこも解決したいです。なお、こちらは原因がjsにあるのかな、と感じます。おっしゃる通り、navが既に開いているためです。私がしたいのは,buttunクリック時に、tab,sp時に、navがdrawer（上記のサイトのように）表示させたいのが目的です。 overlayも解決したいです。

Lhankor_Mhy

2021/10/19 07:16

.drawer-nav は、tab,sp時にも表示されていますね。なので、なにを問題に感じているのかよくわからないです。

free_teku

2021/10/19 07:29

クリック時にというわけではなく、」すでに表示されているという解釈でよろしいですか？ →私のところは表示されていないのですが、、クリック時に開いていない状況です。泣動画を載せられないので、お伝えすると下記のサイトのようにしたいです http://demo.tivel.jp/n/drawer/

Lhankor_Mhy

2021/10/19 07:31

どうしたいのかはなんとなくわかるのですが、現状がどうなっているのかがわからないです。繰り返しになりますが、ドロワーのメニューは表示されています。

free_teku

2021/10/19 09:12

ありがとうございます。現状を画像で確認いただけると幸いです。（tab: 600px~1180px)の範囲内の画像です

Lhankor_Mhy

2021/10/19 09:13

とりあえず、回答は読んでいただけてますか？

free_teku

2021/10/19 09:51 編集

読みました. js修正しました。 +@ でミスの確認をしていきたいです ↓ こちらでも確認しましたが、modalはステップダウン、インなどがクリックできない状態です。

Lhankor_Mhy

2021/10/19 09:39

修正し切ってないですよ。次からではなくて、今回からミスの確認をした方がいいかと思います。

free_teku

2021/10/19 10:27

失礼いたしました。確認します。また、Chromeのデベロッパーツールをしようとしましたが、急に反映されないくなっています。原因や解決策はわかりますか？→私の方で「Chromeのデベロッパーツール console 非表示」と検索しましたが見つかりませんでした

Lhankor_Mhy

2021/10/19 13:00

Page の方のことだと思いますが、現状の打ち間違いを発見するのにはあまり役に立たないかもしれないですね。

free_teku

2021/10/20 07:58 編集

$(this).hasClass('_open')について、修正したのですがいかがでしょうか？本当に度々で申し訳ございません。謝罪致します。それに伴い、注意深く見たのですが、上記ではいかがですか？

Lhankor_Mhy

2021/10/20 08:04

とりあえず、.drawer-nav_active がないのが原因ではないですか？

free_teku

2021/10/20 10:44 編集

CSSではなく、jsですか？ JSは修正しました。（drawerーnav)のopen→active変更。また、一応、CSSのことかなとも思い、navの外に.drawer-nav{}を書きましたが非表示です。

Lhankor_Mhy

2021/10/20 15:03

HTMLです。

free_teku

2021/10/20 17:00 編集

ご回答ありがとうございます。回答していただいたにも関わらず、進捗をお伝えすることに違和感が残りますが、お伝えします。あれからしばらく行い over-layはできました。しかし、バーガークリック時に、navが右からdrawerするjsは作れないのとバーガーの×を押しても、反応しない所が解消されません。改めて、HTML,CSS,Jsを貼りなおします。教授いただけると幸いです。完成品は上記のdrawerのようにしたいと考えています。

free_teku

2021/10/21 00:56

考え、疑問が生じたので共有させて頂きます課題:nav-openをクリック時に、表示させたり、消えるようにしたい ✅CSS(nav-open)にdisplay: none;を書くと常に消える ✅jsでの解決策を調べ、.hide()をFadeIn()などのメソッド前に置こうとしましたが、メソッドがそもそもなかった。 →＋＠の疑問として、上記のdrawerはメソッドがないのに、なぜ動いているのか疑問が生じました ✅まだ、解決策として行ってはいませんが、attrでstyleの追加をしたほうが良いのかといった解決策を浮かべました。因みに、上記の思考は間違っていますか？毎日、大変恐れ入りますm(__)m

Lhankor_Mhy

2021/10/21 08:30

> CSS(nav-open)にdisplay: none;を書くと常に消えるそうですね。 --- > jsでの解決策を調べ、.hide()をFadeIn()などのメソッド前に置こうとしましたが、メソッドがそもそもなかった。そうですね。 > →＋＠の疑問として、上記のdrawerはメソッドがないのに、なぜ動いているのか疑問が生じました ↓これです。 https://developer.mozilla.org/ja/docs/Web/CSS/transition --- > まだ、解決策として行ってはいませんが、attrでstyleの追加をしたほうが良いのかといった解決策を浮かべました。何についての解決策なのかわからない（.nav-openを消したい？）のですが、それでは解決しないだろうと思います。 --- 上記のdrawerを開発者ツールで見て、nav要素が閉じられていて見えない時に「なぜ見えないのか」を考えてみるといいかと思います。開発者ツールを使うと、プロパティの前のチェックボックスでプロパティの有効・無効を切り替えられたり、Styles の .cls でクラスのつけ外しをテストしたりできるので、利用してみてはどうでしょうか。

free_teku

2021/10/24 06:26

一昨日、昨日と確認しました。わかったことは、position fixed top right のtransform: translateZ(0);がポイントだと理解しました。しかし、隠れない現状があり、right :-70px; などで指定し、隠しましたが、結局、反応がないままとなりました。本日の夜に投稿しますが、確認していただけると幸いです。

free_teku

2021/10/28 13:25

drawerが本当に苦戦です。上記のサイトでわかったことは[transform: translate(250px);」と transform: translateZ(0); がセットで drawerの機能を発揮するような感じがします。なので、humburgerをクリック時に、classをつけるなどして transform: translateZ(0); を調整しているのですが、navがスライドで表示されません。どなたか、ご教授いただけると幸いです。

Lhankor_Mhy

2021/10/29 01:56

> 上記のサイトでわかったことは[transform: translate(250px);」と transform: translateZ(0); がセットでdrawerの機能を発揮するような感じがします。それで合っています。原因がわかったのですから、それに対処すればいいと思うのですが、わからない点はどこですか？

free_teku

2021/10/29 02:22 編集

お忙しい中、ご回答ありがとうございます。結論、書いているのに、反映されないので困惑しています汗試したことは250の数字を変えて、550にするなど行いました。これは、それぞれのサイトにより、隠れるかいなかに関係する数値だと分かりましたが、、

Lhankor_Mhy

2021/10/29 02:23

そうですか、コードを見ないと具体的なことは言えませんが、なにかを書き間違えているのではないでしょうか。 DevToolsなどでスタイルが当たっているかどうか確認してみてはどうですか？

Lhankor_Mhy

2021/10/29 02:27

ああ、別の質問を立てたのですね。では、こちらの質問はクローズして、そちらで回答をお待ちください。